topcoder-archive · nikolay83 · Aug 2, 2021 · Aug 2, 2021
diff --git a/src/routes/CreateNewTeam/components/ResultCard/index.jsx b/src/routes/CreateNewTeam/components/ResultCard/index.jsx
@@ -6,6 +6,7 @@
  */
 import React, { useState, useEffect } from "react";
 import PT from "prop-types";
+import _ from "lodash";
 import { getAuthUserProfile } from "@topcoder/micro-frontends-navbar-app";
 import "./styles.module.scss";
 import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
@@ -15,6 +16,7 @@ import IconTeamMeetingChat from "../../../../assets/images/icon-team-meeting-cha
 import EditRoleForm from "../EditRoleForm";
 import Curve from "../../../../assets/images/curve.svg";
 import CircularProgressBar from "../CircularProgressBar";
+import SkillTag from "../SkillTag";
 import Button from "components/Button";
 import { formatMoney } from "utils/format";
 
@@ -27,7 +29,13 @@ function formatPercent(value) {
   return `${Math.round(value * 100)}%`;
 }
 
-function ResultCard({ role, currentRole, onSaveEditRole }) {
+function ResultCard({
+  role,
+  currentRole,
+  onSaveEditRole,
+  matchedSkills,
+  unMatchedSkills,
+}) {
   const {
     numberOfMembersAvailable,
     isExternalMember,
@@ -249,17 +257,29 @@ function ResultCard({ role, currentRole, onSaveEditRole }) {
         <div styleName="content">
           <div styleName="matching-info">
             <div>
-              <CircularProgressBar
-                size="160"
-                progress={skillsMatch}
-                strokeWidth="6"
-                children={
-                  <div styleName="progressbar-child">
-                    <h4>{formatPercent(skillsMatch)}</h4>
-                    <p>Skills Match</p>
-                  </div>
-                }
-              />
+              {matchedSkills.length
+                ? _.map(matchedSkills, (s) => (
+                    <SkillTag name={s.name} id={s.id} />
+                  ))
+                : null}
+              {matchedSkills.length
+                ? _.map(unMatchedSkills, (s) => (
+                    <SkillTag name={s.name} id={s.id} unmatched />
+                  ))
+                : null}
+              {!matchedSkills.length ? (
+                <CircularProgressBar
+                  size="160"
+                  progress={skillsMatch}
+                  strokeWidth="6"
+                  children={
+                    <div styleName="progressbar-child">
+                      <h4>{formatPercent(skillsMatch)}</h4>
+                      <p>Skills Match</p>
+                    </div>
+                  }
+                />
+              ) : null}
             </div>
             <div styleName="vertical-line" />
             <div>
@@ -279,6 +299,8 @@ function ResultCard({ role, currentRole, onSaveEditRole }) {
 
 ResultCard.propTypes = {
   role: PT.object,
+  matchedSkills: PT.array,
+  unMatchedSkills: PT.array,
   currentRole: PT.object,
   onSaveEditRole: PT.func,
 };

diff --git a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx
@@ -1,7 +1,9 @@
 import { Router, navigate } from "@reach/router";
 import _ from "lodash";
-import React, { useCallback, useState, useEffect } from "react";
+import React, { useCallback, useState, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { useData } from "hooks/useData";
+import { getSkills } from "services/skills";
 import { searchRoles } from "services/teams";
 import { isCustomRole, setCurrentStage } from "utils/helpers";
 import {
@@ -21,9 +23,42 @@ function SearchAndSubmit(props) {
 
   const [searchState, setSearchState] = useState(null);
   const [isNewRole, setIsNewRole] = useState(false);
-
+  const [skills] = useData(getSkills);
   const { matchingRole } = useSelector((state) => state.searchedRoles);
 
+  const matchedSkills = useMemo(() => {
+    if (
+      skills &&
+      matchingRole &&
+      matchingRole.listOfSkills &&
+      searchObject &&
+      searchObject.skills &&
+      searchObject.skills.length
+    ) {
+      return _.map(searchObject.skills, (s) =>
+        _.find(skills, (skill) => skill.id === s)
+      );
+    } else {
+      return [];
+    }
+  }, [skills, matchingRole, searchObject]);
+
+  const unMatchedSkills = useMemo(() => {
+    if (
+      skills &&
+      matchingRole &&
+      matchingRole.listOfSkills &&
+      matchedSkills.length
+    ) {
+      const list = _.filter(
+        matchingRole.listOfSkills,
+        (l) => !_.find(matchedSkills, (m) => m.name === l)
+      );
+      return _.map(list, (s) => _.find(skills, (skill) => skill.name === s));
+    } else {
+      return [];
+    }
+  }, [skills, matchingRole, matchedSkills]);
   useEffect(() => {
     const isFromInputPage =
       searchObject.role ||
@@ -99,13 +134,17 @@ function SearchAndSubmit(props) {
         path="search"
         previousSearchId={previousSearchId}
         addedRoles={addedRoles}
+        matchedSkills={matchedSkills}
+        unMatchedSkills={unMatchedSkills}
         searchState={searchState}
         matchingRole={matchingRole}
         isNewRole={isNewRole}
         {...props}
       />
       <SubmitContainer
         path="result"
+        matchedSkills={matchedSkills}
+        unMatchedSkills={unMatchedSkills}
         addedRoles={addedRoles}
         previousSearchId={previousSearchId}
         matchingRole={matchingRole}

diff --git a/src/routes/CreateNewTeam/components/SearchContainer/index.jsx b/src/routes/CreateNewTeam/components/SearchContainer/index.jsx
@@ -20,6 +20,8 @@ import AddAnotherModal from "../AddAnotherModal";
 import "./styles.module.scss";
 
 function SearchContainer({
+  matchedSkills,
+  unMatchedSkills,
   isNewRole,
   stages,
   progressStyle,
@@ -68,6 +70,8 @@ function SearchContainer({
     if (!isCustomRole(matchingRole))
       return (
         <ResultCard
+          matchedSkills={matchedSkills}
+          unMatchedSkills={unMatchedSkills}
           role={matchingRole}
           onSaveEditRole={onSaveEditRole}
           currentRole={currentRole}
@@ -114,6 +118,8 @@ function SearchContainer({
 SearchContainer.propTypes = {
   isNewRole: PT.bool,
   stages: PT.array,
+  matchedSkills: PT.array,
+  unMatchedSkills: PT.array,
   progressStyle: PT.string,
   previousSearchId: PT.string,
   navigate: PT.func,

diff --git a/src/routes/CreateNewTeam/components/SkillTag/index.jsx b/src/routes/CreateNewTeam/components/SkillTag/index.jsx
@@ -0,0 +1,41 @@
+/**
+ * Skill Tag
+ * An item for the matched skill result page.
+ * Shows an image and the name of the skill.
+ */
+import React from "react";
+import PT from "prop-types";
+import IconSkill from "../../../../assets/images/icon-skill.svg";
+import "./styles.module.scss";
+import cn from "classnames";
+
+const assets = require.context(
+  "../../../../assets/images/all-skill-images",
+  false,
+  /svg/
+);
+
+function SkillTag({ id, name, unmatched }) {
+  return (
+    <div styleName={cn("tag", { unmatched })}>
+      {assets && assets.keys().includes(`./id-${id}.svg`) ? (
+        <img
+          src={assets(`./id-${id}.svg`).default}
+          alt={name}
+          styleName="image"
+        />
+      ) : (
+        <IconSkill styleName="image" />
+      )}
+      <p styleName="item-text">{name}</p>
+    </div>
+  );
+}
+
+SkillTag.propTypes = {
+  id: PT.string,
+  name: PT.string,
+  unmatched: PT.bool,
+};
+
+export default SkillTag;
diff --git a/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss b/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss
@@ -0,0 +1,51 @@
+.tag {
+  font-family: Roboto;
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  border-radius: 32px;
+  border: 1px solid #0AB88A;
+  color: #2A2A2A;
+  font-size: 10px;
+  padding: 8px;
+  line-height: 12px;
+  margin-right: 6px;
+  margin-bottom: 6px;
+
+
+  .image {
+    height: 20px;
+  }
+  &.unmatched {
+    border-color: #EF476F;
+    background-color: #E9E9E9;
+    color: #2A2A2A;
+
+  }
+}
+.item-card {
+  border: 1px solid #d4d4d4;
+  border-radius: 5px;
+  width: 117px;
+  height: 107px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  margin: 0 0 24px 24px;
+  cursor: pointer;
+  color: #555;
+  font-weight: 500;
+
+  &.selected {
+    border-color: #0ab88a;
+    background-color: #e0faf3;
+    font-weight: 500;
+    color: #2a2a2a;
+  }
+}
+
+.item-text {
+  text-align: center;
+  font-size: 14px;
+}
diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx
@@ -30,6 +30,8 @@ import { postTeamRequest } from "services/teams";
 import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
 
 function SubmitContainer({
+  matchedSkills,
+  unMatchedSkills,
   stages,
   setStages,
   progressStyle,
@@ -131,6 +133,8 @@ function SubmitContainer({
     <div styleName="page">
       {!isCustomRole(matchingRole) ? (
         <ResultCard
+          matchedSkills={matchedSkills}
+          unMatchedSkills={unMatchedSkills}
           role={matchingRole}
           onSaveEditRole={onSaveEditRole}
           currentRole={currentRole}
@@ -175,6 +179,8 @@ function SubmitContainer({
 }
 
 SubmitContainer.propTypes = {
+  matchedSkills: PT.array,
+  unMatchedSkills: PT.array,
   stages: PT.array,
   setStages: PT.func,
   progressStyle: PT.string,

diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RoleStaticCard/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/components/RoleStaticCard/index.jsx
@@ -0,0 +1,34 @@
+/**
+ * Role Static Item
+ * An item for the Role List component.
+ */
+import React from "react";
+import { navigate } from "@reach/router";
+import PT from "prop-types";
+import cn from "classnames";
+import FallbackIcon from "../../../../../../assets/images/icon-role-fallback.svg";
+import "./styles.module.scss";
+
+function RoleStaticCard() {
+  const goToJdPage = () => {
+    navigate("/taas/createnewteam/jd");
+  };
+
+  return (
+    <div styleName="item-card">
+      <p styleName="item-text">Don't see what you're looking for?</p>
+      <button
+        styleName="button"
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          goToJdPage();
+        }}
+      >
+        Describe your needs
+      </button>
+    </div>
+  );
+}
+
+export default RoleStaticCard;
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RoleStaticCard/styles.module.scss b/src/routes/CreateNewTeam/pages/SelectRole/components/RoleStaticCard/styles.module.scss
@@ -0,0 +1,37 @@
+@import "styles/include";
+
+.item-card {
+  border: 1px solid #d4d4d4;
+  border-radius: 5px;
+  padding: 12px 16px;
+  width: 212px;
+  height: 136px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  margin: 0 0 23px 23px;
+}
+
+.item-text {
+  @include font-barlow;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  text-transform: uppercase;
+}
+
+.button {
+  font-size: 14px;
+  line-height: 22px;
+  padding: 0;
+  outline: none;
+  background: none;
+  color: #0d61bf;
+  border: none;
+  text-align: left;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx b/src/routes/CreateNewTeam/pages/SelectRole/components/RolesList/index.jsx
@@ -7,6 +7,7 @@
 import React, { useCallback, useState } from "react";
 import PT from "prop-types";
 import RoleItem from "../RoleItem";
+import RoleStaticCard from "../RoleStaticCard";
 import ItemList from "../../../../components/ItemList";
 
 function RolesList({ roles, selectedRoleId, onDescriptionClick, toggleRole }) {
@@ -43,6 +44,7 @@ function RolesList({ roles, selectedRoleId, onDescriptionClick, toggleRole }) {
           isSelected={selectedRoleId === id}
         />
       ))}
+      <RoleStaticCard />
     </ItemList>
   );
 }