PROD-2487 display TopcoderAcademy certificates on user profile

Author: vas3a

config/default.js

@@ -444,6 +444,7 @@ module.exports = {
   GIGS_PAGES_PATH: '/gigs',
   GIGS_LISTING_CACHE_TIME: 300, // in seconds
   START_PAGE_PATH: '/start',
+  TC_ACADEMY_BASE_PATH: '/learn',
   GUIKIT: {
     DEBOUNCE_ON_CHANGE_TIME: 150,
   },

src/assets/images/profile/tca-certificates/datascience-badge.png

@@ -0,0 +1,50 @@
+import React from 'react';
+import PT from 'prop-types';
+import { noop } from 'lodash/noop';
+import { Modal } from 'topcoder-react-ui-kit';
+import cn from 'classnames';
+
+import IconClose from 'assets/images/icon-close-green.svg';
+import styles from './styles.scss';
+
+const ProfileModal = ({
+  children,
+  title,
+  onCancel,
+  containerClassName,
+}) => (
+  <Modal
+    theme={{
+      container: cn(styles['modal-container'], containerClassName),
+      overlay: styles['modal-overlay'],
+    }}
+    onCancel={onCancel}
+  >
+    <React.Fragment>
+      <div styleName="header">
+        <h2 styleName="title">
+          {title}
+        </h2>
+        <div styleName="icon" role="presentation" onClick={onCancel}>
+          <IconClose />
+        </div>
+      </div>
+      {children}
+    </React.Fragment>
+  </Modal>
+);
+
+ProfileModal.defaultProps = {
+  title: null,
+  onCancel: noop,
+  containerClassName: '',
+};
+
+ProfileModal.propTypes = {
+  children: PT.node.isRequired,
+  title: PT.node,
+  onCancel: PT.func,
+  containerClassName: PT.string,
+};
+
+export default ProfileModal;

src/assets/images/profile/tca-certificates/design-badge.png

@@ -0,0 +1,48 @@
+@import "~styles/mixins";
+
+.modal-overlay {
+    background: #000;
+  }
+  
+  .modal-container-copilot,
+  .modal-container {
+    width: 1232px;
+    min-height: 700px;
+    max-width: 1232px;
+    border-radius: 8px;
+    padding: 32px 32px 0 32px;
+    gap: 24px;
+  
+    &.modal-container-copilot {
+      height: auto;
+    }
+  
+    @include xs-to-sm {
+      width: 100%;
+      max-width: 100%;
+      height: 100% !important;
+      max-height: 100% !important;
+      padding: 24px 16px 48px 16px;
+    }
+  
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 24px;
+  
+      .title {
+        @include barlow-medium;
+  
+        font-weight: 600;
+        font-size: 22px;
+        line-height: 26px;
+        text-transform: uppercase;
+      }
+  
+      .icon {
+        cursor: pointer;
+      }
+    }
+  }
+  

src/assets/images/profile/tca-certificates/develop-badge.png

@@ -0,0 +1,38 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import DataScienceBadgeImg from 'assets/images/profile/tca-certificates/datascience-badge.png';
+import DesignBadgeImg from 'assets/images/profile/tca-certificates/design-badge.png';
+import DevelopBadgeImg from 'assets/images/profile/tca-certificates/develop-badge.png';
+import QaBadgeImg from 'assets/images/profile/tca-certificates/qa-badge.png';
+
+import './styles.scss';
+
+const badgesMap = {
+  DATASCIENCE: DataScienceBadgeImg,
+  DESIGN: DesignBadgeImg,
+  DEV: DevelopBadgeImg,
+  QA: QaBadgeImg,
+};
+
+const CourseBadge = ({ type: badgeType, size }) => {
+  const badgeImg = badgesMap[badgeType];
+
+  return (
+    <div styleName={`tca-badge-wrap size-${size}`}>
+      <img src={badgeImg} alt={badgeType} />
+    </div>
+  );
+};
+
+CourseBadge.defaultProps = {
+  size: 'md',
+};
+
+CourseBadge.propTypes = {
+  size: PT.oneOf(['md']),
+  type: PT.oneOf(['DATASCIENCE', 'DESIGN', 'DEV', 'QA']).isRequired,
+};
+
+
+export default CourseBadge;

src/assets/images/profile/tca-certificates/qa-badge.png

@@ -0,0 +1,13 @@
+.tca-badge-wrap {
+    &.size-md {
+        width: 48px;
+        height: 48px;
+    }
+    
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+}

src/assets/images/profile/tca-certificates/tca-logo.svg

@@ -0,0 +1,44 @@
+import React from 'react';
+import PT from 'prop-types';
+
+import './styles.scss';
+import CourseBadge from '../CourseBadge';
+
+const List = ({
+  certificates,
+  onClick,
+}) => (
+  <div styleName="list">
+    {certificates.map(certificate => (
+      <div
+        styleName="list-item"
+        key={certificate.id}
+        onClick={() => onClick(certificate)}
+        onKeyPress={() => onClick(certificate)}
+        role="button"
+        tabIndex={-1}
+      >
+        <div styleName="list-item_badge">
+          <CourseBadge type={certificate.certificationTrackType || 'DEV'} />
+        </div>
+        <div styleName="list-item_description">
+          <div styleName="list-item_title">
+            {certificate.certificationTitle}
+          </div>
+          <div styleName="list-item_sub">
+            <a href={`//${certificate.providerUrl}`} target="blank" rel="noopener">
+              by {certificate.provider}
+            </a>
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+List.propTypes = {
+  certificates: PT.arrayOf(PT.shape()).isRequired,
+  onClick: PT.func.isRequired,
+};
+
+export default List;

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

@@ -0,0 +1,64 @@
+@import "~styles/mixins";
+
+.list {
+  display: flex;
+  gap: 16px;
+  margin-top: 24px;
+  flex-wrap: wrap;
+  @include xs-to-sm {
+    flex-direction: column;  
+    flex-wrap: nowrap;
+    margin-top: 16px;
+  }
+}
+
+.list-item {
+  background: $listing-white;
+  border-radius: 8px;
+  padding: 16px;
+
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  width: 316px;
+  transition: 0.25s ease-in-out;
+  box-shadow: 0px 0px 0 rgba(0, 0, 0, 0);
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0px 0px 16px rgba(22, 103, 154, 0.5);
+  }
+  @include xs-to-sm {
+    width: 100%;
+  }
+}
+
+.list-item_badge {
+  width: 48px;
+  height: 48px;
+  svg {
+    display: block;
+    width: 48px;
+    height: 48px;
+  }
+}
+
+.list-item_description {
+  
+}
+
+.list-item_title {
+  @include roboto-sans-regular;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+.list-item_sub {
+  @include roboto-sans-regular;
+  font-style: italic;
+  font-size: 14px;
+  line-height: 22px;
+  color: $listing-placeholder-gray;
+}

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

@@ -0,0 +1,45 @@
+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.PLATFORM_SITE_URL}${config.TC_ACADEMY_BASE_PATH}`;
+
+const TcaCertificateModal = ({
+  certificate,
+  onCancel,
+  memberHandle,
+}) => (
+  <ProfileModal
+    title="Topcoder Academy"
+    onCancel={onCancel}
+    containerClassName={styles['tca-certificate-modal']}
+  >
+    <iframe
+      styleName="iframe"
+      src={[
+        tcAcademyPath,
+        certificate.provider,
+        certificate.certification,
+        memberHandle,
+        'certificate',
+      ].join('/')}
+      title={certificate.certificationTitle}
+    />
+  </ProfileModal>
+);
+
+TcaCertificateModal.defaultProps = {
+  onCancel: noop,
+};
+
+TcaCertificateModal.propTypes = {
+  certificate: PT.shape().isRequired,
+  onCancel: PT.func,
+  memberHandle: PT.string.isRequired,
+};
+
+export default TcaCertificateModal;

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

@@ -0,0 +1,26 @@
+@import "~styles/mixins";
+
+.tca-certificate-modal {
+    display: flex;
+    flex-direction: column;
+    min-height: auto;
+    padding: 32px;
+    width: 980px;
+    max-width: 96vw;
+    @include xs-to-sm {
+        display: flex;
+        flex-direction: column;
+        max-width: none;
+        width: 100%;
+    }
+}
+
+.iframe {
+    display: block;
+    height: 600px;
+    width: 100%;
+    @include xs-to-sm {
+        height: auto;
+        flex: 1;
+    }
+}