Tca certifications on profile page

.circleci/config.yml

@@ -349,7 +349,7 @@ workflows:
           filters:
             branches:
               only:
-                - free
+                - tca-certifications-on-profile-page
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global

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

@@ -713,6 +713,7 @@ exports[`renders a full Profile correctly 1`] = `
       "unsubscribe": null,
     }
   }
+  tcAcademyCertifications={Array []}
 />
 `;
 
@@ -862,5 +863,6 @@ exports[`renders an empty Profile correctly 1`] = `
       "unsubscribe": null,
     }
   }
+  tcAcademyCertifications={Array []}
 />
 `;

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,
   },
@@ -452,4 +453,5 @@ module.exports = {
     SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1',
   },
   PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com',
+  PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder-dev.com',
 };

config/development.js

@@ -5,4 +5,5 @@ module.exports = {
     USER_SETTINGS: '', /* No dev server is available for saved searches */
   },
   PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com',
+  PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder-dev.com',
 };

config/production.js

@@ -226,4 +226,5 @@ module.exports = {
   TC_EDU_SEARCH_BAR_MAX_RESULTS_EACH_GROUP: 3,
   ENABLE_RECOMMENDER: true,
   PLATFORM_SITE_URL: 'https://platform.topcoder.com',
+  PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder.com',
 };

package.json

@@ -153,7 +153,7 @@
     "supertest": "^3.1.0",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "1.2.7",
+    "topcoder-react-lib": "1000.29.7",
     "topcoder-react-ui-kit": "2.0.1",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

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

@@ -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/shared/components/ProfilePage/ProfileModal/styles.scss

@@ -0,0 +1,47 @@
+@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/shared/components/ProfilePage/TcaCertificates/CourseBadge/index.jsx

@@ -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/shared/components/ProfilePage/TcaCertificates/CourseBadge/styles.scss

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

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

@@ -0,0 +1,46 @@
+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,
+}) => (
+  <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>
+          <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>
+          </div>
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+List.propTypes = {
+  certificates: PT.arrayOf(PT.shape()).isRequired,
+  onClick: PT.func.isRequired,
+};
+
+export default List;

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

@@ -0,0 +1,63 @@
+@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: 0 0 0 rgba(0, 0, 0, 0);
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 0 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_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/TcaCertificates/TcaCertificateModal/index.jsx

@@ -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.PLATFORMUI_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;