GAME-205 Feat/badges box -> dev

.circleci/config.yml

@@ -363,7 +363,7 @@ workflows:
           filters:
             branches:
               only:
-                - feature/dice-setup
+                - feat/badges-box
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global

src/shared/actions/page/profile.js

@@ -21,11 +21,11 @@ async function getGamificationBadgesInit(handle) {
  * @param {String} handle Topcoder member handle.
  * @return {Action}
  */
-async function getGamificationBadgesDone(handle) {
+async function getGamificationBadgesDone(handle, limit) {
   try {
     const memberInfo = await fetch(`${config.API.V5}/members/${handle}`)
       .then(response => response.json());
-    const badges = await fetch(`${config.API.V5}/gamification/badges/assigned/${memberInfo.userId}?organization_id=${config.GAMIFICATION.ORG_ID}`)
+    const badges = await fetch(`${config.API.V5}/gamification/badges/assigned/${memberInfo.userId}?organization_id=${config.GAMIFICATION.ORG_ID}&limit=${limit || 4}`)
       .then(response => response.json());
 
     return {

src/shared/components/ProfileBadgesPage/index.jsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import PT from 'prop-types';
+import { Link } from 'react-router-dom';
+import { get } from 'lodash';
+import { Modal } from 'topcoder-react-ui-kit';
+import IconClose from 'assets/images/tc-edu/icon-close-big.svg';
+import FallBackAwardIcon from 'assets/images/default-award.svg';
+import md from 'utils/markdown';
+import { format } from 'date-fns';
+import AwardModal from '../ProfilePage/Awards/AwardModal';
+
+import style from './styles.scss';
+
+const ProfileBadges = ({ badges, handleParam }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [modalData, setModalData] = useState({});
+
+  return (
+    <div styleName="outer-container">
+      <Link
+        to={`/members/${handleParam}`}
+        styleName="memberPageBackLink"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="12"
+          fill="none"
+          viewBox="0 0 14 12"
+        >
+          <path
+            fill="#137D60"
+            fillRule="evenodd"
+            d="M6.766 11.366a.8.8 0 01-1.132 0l-4.8-4.8a.8.8 0 010-1.132l4.8-4.8a.8.8 0 111.132 1.132L3.33 5.2h9.27a.8.8 0 010 1.6H3.33l3.435 3.434a.8.8 0 010 1.132z"
+            clipRule="evenodd"
+          />
+        </svg>
+        Return to Profile
+      </Link>
+      <div styleName="badgesWrap">
+        <div styleName="seactionTitle">COMMUNITY AWARDS & HONORS</div>
+        <div styleName="badgesGrid">
+          {
+            badges.rows.map((reward) => {
+              const title = get(reward, 'org_badge.badge_name');
+              const imageUrl = get(reward, 'org_badge.badge_image_url');
+              let description = get(reward, 'org_badge.badge_description');
+              if (description) {
+                description = md(description);
+              }
+              let awardedAt = get(reward, 'awarded_at');
+              if (awardedAt) {
+                awardedAt = format(new Date(awardedAt), 'PPP');
+              }
+
+              return (
+                <div
+                  role="presentation"
+                  styleName="awardBadge"
+                  onClick={() => {
+                    setShowModal(true);
+                    setModalData({
+                      title,
+                      description,
+                      imageUrl,
+                      awardedAt,
+                    });
+                  }}
+                >
+                  {
+                    imageUrl ? (
+                      <img src={imageUrl} alt="award-badge" styleName="image" />
+                    ) : (
+                      <FallBackAwardIcon styleName="image" />
+                    )
+                  }
+                  <div styleName="title">
+                    <span>
+                      <div dangerouslySetInnerHTML={{ __html: title }} />
+                    </span>
+                  </div>
+                </div>
+              );
+            })
+          }
+        </div>
+      </div>
+      {
+        showModal && (
+          <Modal onCancel={() => setShowModal(false)} theme={style}>
+            <div styleName="award-modal">
+              <div styleName="header">
+                <h2 styleName="title">Community Awards & Honors</h2>
+                <div styleName="icon" role="presentation" onClick={() => setShowModal(false)}>
+                  <IconClose />
+                </div>
+              </div>
+              <hr />
+
+              <AwardModal
+                modalData={modalData}
+              />
+            </div>
+          </Modal>
+        )
+      }
+    </div>
+  );
+};
+
+ProfileBadges.defaultProps = {
+  badges: {},
+};
+
+ProfileBadges.propTypes = {
+  badges: PT.shape(),
+  handleParam: PT.string.isRequired,
+};
+
+export default ProfileBadges;

src/shared/components/ProfileBadgesPage/styles.scss

@@ -0,0 +1,144 @@
+/* stylelint-disable no-descending-specificity */
+@import "~styles/mixins";
+
+.outer-container {
+  width: 100%;
+  max-width: $screen-max;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+
+  @include xs-to-md {
+    margin: 0 32px;
+  }
+
+  .memberPageBackLink {
+    text-transform: uppercase;
+    color: $listing-checkbox-green;
+    font-weight: 700;
+    font-family: Roboto, sans-serif;
+    margin: 32px 0;
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin-right: 6px;
+    }
+  }
+
+  .badgesWrap {
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    padding: 32px;
+    margin-bottom: 32px;
+
+    .seactionTitle {
+      @include barlow-medium;
+
+      font-weight: 600;
+      color: #2a2a2a;
+      font-size: 22px;
+      line-height: 26px;
+      text-transform: uppercase;
+      padding-bottom: 24px;
+      border-bottom: 2px solid #e9e9e9;
+    }
+
+    .badgesGrid {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+
+      @include xs-to-sm {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      @include md {
+        grid-template-columns: repeat(4, 1fr);
+      }
+
+      .awardBadge {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        padding-top: 32px;
+
+        .image {
+          width: 100px;
+          height: 100px;
+        }
+
+        .title {
+          @include roboto-bold;
+          $color: $tco-black;
+
+          font-size: 12px;
+          font-weight: 700;
+          line-height: 16px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          text-align: center;
+          align-items: center;
+          max-width: 130px;
+          margin-top: 17px;
+          text-transform: uppercase;
+
+          @include xs-to-sm {
+            max-width: unset;
+          }
+        }
+      }
+    }
+  }
+}
+
+.award-modal {
+  padding-bottom: 10px;
+  border-radius: 8px;
+  margin: 25px 32px 32px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+
+    .title {
+      @include barlow-medium;
+
+      font-weight: 600;
+      color: #2a2a2a;
+      font-size: 22px;
+      line-height: 26px;
+      text-transform: uppercase;
+    }
+
+    .icon {
+      cursor: pointer;
+      margin-top: 5px;
+    }
+  }
+}
+
+hr {
+  opacity: 0.5;
+}
+
+.container {
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  min-width: 600px;
+
+  @include xs-to-sm {
+    width: 90%;
+    min-width: unset;
+  }
+}
+
+.overlay {
+  background-color: #0c0c0c;
+  opacity: 0.85;
+}

src/shared/components/ProfilePage/Awards/AwardBadge/styles.scss

@@ -6,6 +6,7 @@
   border-radius: 8px;
   display: flex;
   cursor: pointer;
+  min-width: 316px;
 
   .image {
     width: 48px;

src/shared/components/ProfilePage/Awards/AwardModal/index.jsx

@@ -8,7 +8,7 @@ const AwatarModal = ({
   modalData,
 }) => {
   const {
-    title, description, imageUrl,
+    title, description, imageUrl, awardedAt,
   } = modalData;
 
   return (
@@ -25,6 +25,9 @@ const AwatarModal = ({
         <div styleName="title">
           <span>{title}</span>
         </div>
+        {
+          awardedAt && <div styleName="awardedAt">{`Awarded on ${awardedAt}`}</div>
+        }
 
         <div styleName="description">{description}</div>
 
@@ -41,6 +44,7 @@ AwatarModal.propTypes = {
   modalData: PT.shape(
     {
       title: PT.string,
+      awardedAt: PT.string,
       description: PT.string,
       imageUrl: PT.string,
     },

src/shared/components/ProfilePage/Awards/AwardModal/styles.scss

@@ -27,6 +27,10 @@
     justify-content: center;
     flex-direction: column;
 
+    @include xs-to-md {
+      align-items: center;
+    }
+
     .title {
       @include roboto-bold;
 
@@ -40,14 +44,24 @@
       }
     }
 
+    .awardedAt {
+      @include roboto-bold;
+
+      color: $listing-placeholder-gray;
+      font-size: 12px;
+      line-height: 16px;
+      text-transform: uppercase;
+      margin-top: 8px;
+    }
+
     .description {
       @include brackets-content;
 
       font-weight: 400;
       color: $tco-black;
       font-size: 16px;
       line-height: 24px;
-      margin-top: 10px;
+      margin-top: 16px;
     }
 
     @include xs-to-md {