Merge pull request #6833 from topcoder-platform/TCA-768_member-profile-tca-certs

TCA-768 member profile with TCA certs

Author: luizrrodrigues

.circleci/config.yml

@@ -349,14 +349,14 @@ workflows:
           filters:
             branches:
               only:
-                - sprig-lib
+                - free
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global
           filters:
             branches:
               only:
-                - PROD-3199
+                - TCA-768_member-profile-tca-certs
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global

__tests__/shared/components/ProfilePage/__snapshots__/index.jsx.snap

@@ -715,6 +715,7 @@ exports[`renders a full Profile correctly 1`] = `
     }
   }
   tcAcademyCertifications={Array []}
+  tcAcademyCourses={Array []}
 />
 `;
 
@@ -866,5 +867,6 @@ exports[`renders an empty Profile correctly 1`] = `
     }
   }
   tcAcademyCertifications={Array []}
+  tcAcademyCourses={Array []}
 />
 `;

src/assets/images/profile/tca-certificates/tca-certifications-badges-sprite.png

@@ -25,7 +25,7 @@ const ProfileModal = ({
         <h2 styleName="title">
           {title}
         </h2>
-        <div styleName="icon" role="presentation" onClick={onCancel}>
+        <div className="close-icon" styleName="icon" role="presentation" onClick={onCancel}>
           <IconClose />
         </div>
       </div>

src/shared/components/ProfilePage/ProfileModal/index.jsx

@@ -30,6 +30,8 @@
     justify-content: space-between;
     align-items: center;
     padding-bottom: 24px;
+    z-index: 1;
+    position: relative;
 
     .title {
       @include barlow-medium;

src/shared/components/ProfilePage/ProfileModal/styles.scss

@@ -0,0 +1,25 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import 'assets/images/profile/tca-certificates/tca-certifications-badges-sprite.png';
+import './styles.scss';
+
+const CertificationBadge = ({ type: badgeType, level, size }) => (
+  <div
+    className={`badge-${badgeType}--${level}`.toLowerCase()}
+    styleName={`tca-badge-wrap size-${size}`}
+  />
+);
+
+CertificationBadge.defaultProps = {
+  size: 'md',
+};
+
+CertificationBadge.propTypes = {
+  size: PT.oneOf(['md']),
+  level: PT.oneOf(['Beginner', 'Intermediate', 'Expert', 'All Levels']).isRequired,
+  type: PT.oneOf(['DATASCIENCE', 'DESIGN', 'DEV', 'DATABASE', 'INTERVIEW', 'QA', 'SECURITY']).isRequired,
+};
+
+
+export default CertificationBadge;

src/shared/components/ProfilePage/TcaCertificates/CertificationBadge/index.jsx

@@ -0,0 +1,95 @@
+.tca-badge-wrap {
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: 300px 283.6363px;
+  background-image: url('../../../../../assets/images/profile/tca-certificates/tca-certifications-badges-sprite.png');
+
+  &.size-md {
+    width: 48px;
+    height: 48px;
+  }
+
+  &:global(.badge-interview--beginner) {
+    background-position: -6px -6px;
+  }
+
+  &:global(.badge-interview--intermediate) {
+    background-position: -66px -6px;
+  }
+
+  &:global(.badge-interview--expert) {
+    background-position: -6px -63px;
+  }
+
+  &:global(.badge-datascience--beginner) {
+    background-position: -126px -6px;
+  }
+
+  &:global(.badge-datascience--intermediate) {
+    background-position: -66px -63px;
+  }
+
+  &:global(.badge-datascience--expert) {
+    background-position: -6px -119px;
+  }
+
+  &:global(.badge-database--beginner) {
+    background-position: -126px -63px;
+  }
+
+  &:global(.badge-database--intermediate) {
+    background-position: -126px -119px;
+  }
+
+  &:global(.badge-database--expert) {
+    background-position: -66px -119px;
+  }
+
+  &:global(.badge-design--beginner) {
+    background-position: -186px -6px;
+  }
+
+  &:global(.badge-design--intermediate) {
+    background-position: -186px -63px;
+  }
+
+  &:global(.badge-design--expert) {
+    background-position: -186px -119px;
+  }
+
+  &:global(.badge-dev--beginner) {
+    background-position: -6px -176px;
+  }
+
+  &:global(.badge-dev--intermediate) {
+    background-position: -66px -176px;
+  }
+
+  &:global(.badge-dev--expert) {
+    background-position: -126px -176px;
+  }
+
+  &:global(.badge-qa--beginner) {
+    background-position: -186px -176px;
+  }
+
+  &:global(.badge-qa--intermediate) {
+    background-position: -246px -6px;
+  }
+
+  &:global(.badge-qa--expert) {
+    background-position: -246px -63px;
+  }
+
+  &:global(.badge-security--beginner) {
+    background-position: -246px -119px;
+  }
+
+  &:global(.badge-security--intermediate) {
+    background-position: -246px -176px;
+  }
+
+  &:global(.badge-security--expert) {
+    background-position: -6px -233px;
+  }
+}

src/shared/components/ProfilePage/TcaCertificates/CertificationBadge/styles.scss

@@ -2,36 +2,38 @@ import React from 'react';
 import PT from 'prop-types';
 
 import './styles.scss';
-import CourseBadge from '../CourseBadge';
 
 const preventDefault = ev => ev.stopPropagation();
 
 const List = ({
   certificates,
   onClick,
+  renderIcon,
 }) => (
   <div styleName="list">
     {certificates.map(certificate => (
       <div
         styleName="list-item"
         key={certificate.id}
         onClick={() => onClick(certificate)}
-        onKeyPress={() => onClick(certificate)}
+        onKeyDown={() => onClick(certificate)}
         role="button"
         tabIndex={-1}
       >
         <div styleName="list-item_badge">
-          <CourseBadge type={certificate.certificationTrackType || 'DEV'} />
+          {renderIcon(certificate)}
         </div>
         <div>
           <div styleName="list-item_title">
-            {certificate.certificationTitle}
-          </div>
-          <div styleName="list-item_sub">
-            <a href={`//${certificate.providerUrl}`} target="blank" rel="noopener" onClick={preventDefault}>
-              by {certificate.provider}
-            </a>
+            {certificate.certificationTitle || certificate.topcoderCertification.title}
           </div>
+          {certificate.resourceProvider && (
+            <div styleName="list-item_sub">
+              <a href={`//${certificate.resourceProvider.url}`} target="blank" rel="noopener" onClick={preventDefault}>
+                by {certificate.resourceProvider.name}
+              </a>
+            </div>
+          )}
         </div>
       </div>
     ))}
@@ -41,6 +43,7 @@ const List = ({
 List.propTypes = {
   certificates: PT.arrayOf(PT.shape()).isRequired,
   onClick: PT.func.isRequired,
+  renderIcon: PT.element.isRequired,
 };
 
 export default List;

src/shared/components/ProfilePage/TcaCertificates/List/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import PT from 'prop-types';
+import { noop } from 'lodash/noop';
+import { config } from 'topcoder-react-utils';
+
+import ProfileModal from '../../ProfileModal';
+import styles from './styles.scss';
+
+const tcAcademyPath = `${config.PLATFORMUI_SITE_URL}${config.TC_ACADEMY_BASE_PATH}`;
+
+const TcaCertificationCertificateModal = ({
+  certificate,
+  onCancel,
+}) => (
+  <ProfileModal
+    title=""
+    onCancel={onCancel}
+    containerClassName={styles['tca-modal']}
+  >
+    <iframe
+      styleName="iframe"
+      src={`${tcAcademyPath}/${certificate.completionUuid}?view-style=modal`}
+      title={certificate.certificationTitle}
+    />
+  </ProfileModal>
+);
+
+TcaCertificationCertificateModal.defaultProps = {
+  onCancel: noop,
+};
+
+TcaCertificationCertificateModal.propTypes = {
+  certificate: PT.shape().isRequired,
+  onCancel: PT.func,
+};
+
+export default TcaCertificationCertificateModal;

src/shared/components/ProfilePage/TcaCertificates/TcaCertificationCertificateModal/index.jsx

@@ -0,0 +1,39 @@
+@import "~styles/mixins";
+
+.tca-modal {
+  display: flex;
+  flex-direction: column;
+  min-height: auto;
+  padding: 36px;
+  width: 980px;
+  max-width: 96vw;
+  background: transparent;
+
+  :global(.close-icon) {
+    color: #fff;
+
+    svg > path {
+      fill: currentColor;
+    }
+  }
+
+  @include xs-to-sm {
+    display: flex;
+    flex-direction: column;
+    max-width: none;
+    width: 100%;
+  }
+}
+
+.iframe {
+  display: block;
+  height: 788px;
+  max-height: 100%;
+  width: calc(100% + 37px + 37px);
+  margin: -102px -37px -36px;
+
+  @include xs-to-sm {
+    height: auto;
+    flex: 1;
+  }
+}

src/shared/components/ProfilePage/TcaCertificates/TcaCertificationCertificateModal/styles.scss

@@ -8,7 +8,7 @@ import styles from './styles.scss';
 
 const tcAcademyPath = `${config.PLATFORMUI_SITE_URL}${config.TC_ACADEMY_BASE_PATH}`;
 
-const TcaCertificateModal = ({
+const TcaCourseCertificateModal = ({
   certificate,
   onCancel,
   memberHandle,
@@ -32,14 +32,14 @@ const TcaCertificateModal = ({
   </ProfileModal>
 );
 
-TcaCertificateModal.defaultProps = {
+TcaCourseCertificateModal.defaultProps = {
   onCancel: noop,
 };
 
-TcaCertificateModal.propTypes = {
+TcaCourseCertificateModal.propTypes = {
   certificate: PT.shape().isRequired,
   onCancel: PT.func,
   memberHandle: PT.string.isRequired,
 };
 
-export default TcaCertificateModal;
+export default TcaCourseCertificateModal;

src/shared/components/ProfilePage/TcaCertificates/TcaCertificateModal/index.jsx renamed to src/shared/components/ProfilePage/TcaCertificates/TcaCourseCertificateModal/index.jsx

@@ -18,7 +18,7 @@
 
 .iframe {
   display: block;
-  height: 600px;
+  height: 760px;
   width: 100%;
 
   @include xs-to-sm {