Allow user to add custom role to added roles list from No Matching Profiles card.

Author: mbaghel

src/routes/CreateNewTeam/actions/index.js

@@ -32,7 +32,7 @@ const addMatchingRole = (matchingRole) => ({
   payload: matchingRole,
 });
 
-const deleteMatchingRole = (matchingRole) => ({
+const deleteMatchingRole = () => ({
   type: ACTION_TYPE.DELETE_MATCHING_ROLE,
 });
 
@@ -61,7 +61,7 @@ export const saveMatchingRole = (matchingRole) => (dispatch, getState) => {
   updateLocalStorage(getState().searchedRoles);
 };
 
-export const clearMatchingRole = (matchingRole) => (dispatch, getState) => {
+export const clearMatchingRole = () => (dispatch, getState) => {
   dispatch(deleteMatchingRole());
   updateLocalStorage(getState().searchedRoles);
 };

src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx

@@ -2,16 +2,42 @@
  * No Matching Profiles Result Card
  * Card that appears when there are no matching profiles after searching.
  */
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { Link } from "@reach/router";
 import PT from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { addSearchedRole } from "../../actions";
 import "./styles.module.scss";
 import IconEarthX from "../../../../assets/images/icon-earth-x.svg";
 import Curve from "../../../../assets/images/curve.svg";
 import Button from "components/Button";
 import { formatMoney } from "utils/format";
 
 function NoMatchingProfilesResultCard({ role }) {
+  const { addedRoles } = useSelector((state) => state.searchedRoles);
+
+  const alreadyAdded = useMemo(() => {
+    if (
+      addedRoles.find(
+        (addedRole) => addedRole.searchId === role.roleSearchRequestId
+      )
+    ) {
+      return true;
+    }
+    return false;
+  }, [addedRoles, role]);
+
+  const dispatch = useDispatch();
+
+  const addRole = useCallback(() => {
+    const searchId = role.roleSearchRequestId;
+    let name = "Custom Role";
+    if (role.jobTitle && role.jobTitle.length) {
+      name = role.jobTitle;
+    }
+    dispatch(addSearchedRole({ searchId, name }));
+  }, [dispatch, role]);
+
   return (
     <div styleName="result-card">
       <div styleName="heading">
@@ -21,6 +47,11 @@ function NoMatchingProfilesResultCard({ role }) {
         <IconEarthX styleName="transparent-icon" />
       </div>
       <div styleName="content">
+        <h4 styleName="job-title">
+          {role.jobTitle && role.jobTitle.length
+            ? role.jobTitle
+            : "Custom Role"}
+        </h4>
         <p styleName="info-txt">
           We will be looking internally for members matching your requirements
           and be back at them in about 2 weeks.
@@ -38,11 +69,20 @@ function NoMatchingProfilesResultCard({ role }) {
             <p>/Week</p>
           </div>
         )}
-        <Link to="/taas/createnewteam">
-          <Button type="secondary" styleName="button">
-            Modify Search Criteria
+        <div styleName="button-group">
+          <Link to="/taas/createnewteam">
+            <Button styleName="left" type="secondary">
+              Modify Search Criteria
+            </Button>
+          </Link>
+          <Button
+            onClick={addRole}
+            disabled={!role.roleSearchRequestId || alreadyAdded}
+            type="primary"
+          >
+            {alreadyAdded ? "Added" : "Add Custom Role"}
           </Button>
-        </Link>
+        </div>
       </div>
     </div>
   );

src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/styles.module.scss

@@ -13,7 +13,7 @@
   justify-content: flex-start;
   align-items: center;
   padding: 30px 0 60px 0;
-  margin-bottom: 30px;
+  margin-bottom: 14px;
   color: #fff;
   background-image: linear-gradient(225deg, #555555 0%, #2A2A2A 100%);
   position: relative;
@@ -41,6 +41,17 @@
   flex-direction: column;
   align-items: center;
   padding-bottom: 61px;
+  .job-title {
+    @include font-barlow;
+    font-size: 22px;
+    margin-bottom: 18px;
+    font-weight: 600;
+    text-align: center;
+    text-transform: uppercase;
+    // position text over bottom of header image
+    position: relative;
+    z-index: 100;
+    }
   p.info-txt {
     @include font-roboto;
     font-size: 14px;
@@ -82,8 +93,15 @@
     }
   }
 
-  .button {
+  .button-group {
     margin-top: 62px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .left {
+      margin-right: 30px;
+    }
   }
 }
 

src/routes/CreateNewTeam/components/SubmitContainer/index.jsx

@@ -26,7 +26,7 @@ import "./styles.module.scss";
 import { isCustomRole, setCurrentStage } from "utils/helpers";
 import { clearSearchedRoles } from "../../actions";
 import { postTeamRequest } from "services/teams";
-import SuccessCard from "../SuccessCard";
+import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
 
 function SubmitContainer({
   stages,
@@ -112,7 +112,7 @@ function SubmitContainer({
       {!isCustomRole(matchingRole) ? (
         <ResultCard role={matchingRole} />
       ) : (
-        <SuccessCard />
+        <NoMatchingProfilesResultCard role={matchingRole} />
       )}
       <div styleName="right-side">
         <AddedRolesAccordion addedRoles={addedRoles} />