Merge pull request #6571 from topcoder-platform/reskin-tco-badge

TCO badges in member profile

Author: luizrrodrigues

.circleci/config.yml

@@ -356,21 +356,21 @@ workflows:
           filters:
             branches:
               only:
-                - gig-share
+                - free
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global
           filters:
             branches:
               only:
-                - reskin-profile-settings
+                - free
       # This is beta env for production soft releases
       - "build-prod-beta":
           context : org-global
           filters:
             branches:
               only:
-                - tco23-leaderboards
+                - free
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global

Dockerfile

@@ -143,6 +143,8 @@ ENV GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY=$GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY
 # Optimizely
 ENV OPTIMIZELY_SDK_KEY=$OPTIMIZELY_SDK_KEY
 
+ENV GAMIFICATION_ORG_ID=$GAMIFICATION_ORG_ID
+
 ################################################################################
 # Testing and build of the application inside the container.
 

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

@@ -58,6 +58,7 @@ exports[`renders a full Profile correctly 1`] = `
       },
     ]
   }
+  badges={Object {}}
   challenges={null}
   clearSubtrackChallenges={[Function]}
   copilot={true}
@@ -720,6 +721,7 @@ exports[`renders a full Profile correctly 1`] = `
 exports[`renders an empty Profile correctly 1`] = `
 <ProfilePage
   achievements={Array []}
+  badges={Object {}}
   challenges={null}
   clearSubtrackChallenges={[Function]}
   copilot={false}

build.sh

@@ -53,6 +53,7 @@ docker build -t $TAG \
   --build-arg OPTIMIZELY_SDK_KEY=$OPTIMIZELY_SDK_KEY \
   --build-arg COMMUNITY_APP_URL=$COMMUNITY_APP_URL \
   --build-arg GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY=$GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY \
+  --build-arg GAMIFICATION_ORG_ID=$GAMIFICATION_ORG_ID \
   --build-arg VALID_ISSUERS=$VALID_ISSUERS .
 
 # Copies "node_modules" from the created image, if necessary for caching.

config/custom-environment-variables.js

@@ -114,4 +114,8 @@ module.exports = {
     SDK_KEY: 'OPTIMIZELY_SDK_KEY',
   },
   GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: 'GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY',
+  GAMIFICATION: {
+    ORG_ID: 'GAMIFICATION_ORG_ID',
+    ENABLE_BADGE_UI: 'GAMIFICATION_ENABLE_BADGE_UI',
+  },
 };

config/default.js

@@ -452,6 +452,9 @@ module.exports = {
   OPTIMIZELY: {
     SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1',
   },
-  PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com',
+  GAMIFICATION: {
+    ORG_ID: '6052dd9b-ea80-494b-b258-edd1331e27a3',
+    ENABLE_BADGE_UI: true,
+  },
   PLATFORMUI_SITE_URL: 'https://platform-ui.topcoder-dev.com',
 };

src/assets/images/default-award.svg

@@ -1,4 +1,5 @@
 import _ from 'lodash';
 import challengeDetails from './challenge-details';
+import memberProfile from './profile';
 
-export default _.merge({}, challengeDetails);
+export default _.merge({}, challengeDetails, memberProfile);

src/assets/images/profile/header-overlay.png

@@ -0,0 +1,50 @@
+/**
+ * Actions for member profile page.
+ */
+/* global fetch */
+import { redux, config } from 'topcoder-react-utils';
+
+/**
+ * @static
+ * @desc Initiates an action that fetch member's badges
+ * @param {String} handle Member handle.
+ * @return {Action}
+ */
+async function getGamificationBadgesInit(handle) {
+  return { handle };
+}
+
+/**
+ * @static
+ * @desc Creates an action that gets member's badges
+ *
+ * @param {String} handle Topcoder member handle.
+ * @return {Action}
+ */
+async function getGamificationBadgesDone(handle) {
+  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}`)
+      .then(response => response.json());
+
+    return {
+      handle,
+      badges,
+    };
+  } catch (error) {
+    return {
+      handle,
+      error,
+    };
+  }
+}
+
+export default redux.createActions({
+  PAGE: {
+    PROFILE: {
+      GET_GAMIFICATION_BADGES_INIT: getGamificationBadgesInit,
+      GET_GAMIFICATION_BADGES_DONE: getGamificationBadgesDone,
+    },
+  },
+});

src/assets/images/profile/header-overlay.svg

@@ -0,0 +1,39 @@
+import React from 'react';
+import PT from 'prop-types';
+import FallBackAwardIcon from 'assets/images/default-award.svg';
+
+import './styles.scss';
+
+const AwardBadge = ({
+  title, imageUrl, mimeType, onSelectBadge,
+}) => (
+  <div role="presentation" styleName="awardBadge" onClick={onSelectBadge}>
+    {
+      imageUrl ? (
+        <img src={imageUrl} type={mimeType} alt="award-badge" styleName="image" />
+      ) : (
+        <FallBackAwardIcon styleName="image" />
+      )
+    }
+    <div styleName="title">
+      <span>
+        <div dangerouslySetInnerHTML={{ __html: title }} />
+      </span>
+    </div>
+  </div>
+);
+
+AwardBadge.defaultProps = {
+  title: '',
+  imageUrl: null,
+  mimeType: 'image/svg+xml',
+};
+
+AwardBadge.propTypes = {
+  title: PT.string,
+  imageUrl: PT.string,
+  mimeType: PT.string,
+  onSelectBadge: PT.func.isRequired,
+};
+
+export default AwardBadge;

src/shared/actions/page/index.js

@@ -0,0 +1,32 @@
+@import "~styles/mixins";
+
+.awardBadge {
+  background-color: $tc-white;
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  cursor: pointer;
+
+  .image {
+    width: 48px;
+    height: 48px;
+  }
+
+  .title {
+    @include roboto-bold;
+    $color: $tco-black;
+
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 8px;
+    max-width: 130px;
+
+    @include xs-to-sm {
+      max-width: unset;
+    }
+  }
+}

src/shared/actions/page/profile.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PT from 'prop-types';
+import FallBackAwardIcon from 'assets/images/default-award.svg';
+
+import './styles.scss';
+
+const AwatarModal = ({
+  modalData,
+}) => {
+  const {
+    title, description, imageUrl,
+  } = modalData;
+
+  return (
+    <div styleName="awardModal">
+      {
+        imageUrl ? (
+          <img src={imageUrl} alt="award-badge" styleName="image" />
+        ) : (
+          <FallBackAwardIcon styleName="image" />
+        )
+      }
+
+      <div styleName="rightContent">
+        <div styleName="title">
+          <span>{title}</span>
+        </div>
+
+        <div styleName="description">{description}</div>
+
+      </div>
+    </div>
+  );
+};
+
+AwatarModal.defaultProps = {
+  modalData: {},
+};
+
+AwatarModal.propTypes = {
+  modalData: PT.shape(
+    {
+      title: PT.string,
+      description: PT.string,
+      imageUrl: PT.string,
+    },
+  ),
+};
+
+export default AwatarModal;

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

@@ -0,0 +1,58 @@
+@import "~styles/mixins";
+@import "~components/Contentful/brackets";
+
+.awardModal {
+  display: flex;
+  margin-top: 48px;
+
+  @include xs-to-md {
+    flex-direction: column;
+    margin-top: 24px;
+  }
+
+  .image {
+    width: 100px;
+    height: 100px;
+
+    @include xs-to-md {
+      display: block;
+      margin: 0 auto;
+    }
+  }
+
+  .rightContent {
+    margin-left: 16px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-direction: column;
+
+    .title {
+      @include roboto-bold;
+
+      color: $tco-black;
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 26px;
+
+      @include xs-to-md {
+        text-align: center;
+      }
+    }
+
+    .description {
+      @include brackets-content;
+
+      font-weight: 400;
+      color: $tco-black;
+      font-size: 16px;
+      line-height: 24px;
+      margin-top: 10px;
+    }
+
+    @include xs-to-md {
+      margin-top: 24px;
+      text-align: center;
+    }
+  }
+}