Add job title to request from Job Description page.

Add job title/role name heading to Result Card.
Show No Matching Role page on backend error.

Author: mbaghel

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

@@ -32,6 +32,10 @@ function ResultCard({ role }) {
     isExternalMember,
     skillsMatch,
     rates: [rates],
+    jobTitle,
+    name,
+    timeToCandidate,
+    timeToInterview,
   } = role;
   const [userHandle, setUserHandle] = useState(null);
   const [showRates, setShowRates] = useState(false);
@@ -54,6 +58,9 @@ function ResultCard({ role }) {
         <Curve styleName="curve" />
         <IconEarthCheck styleName="transparent-icon" />
       </div>
+      <h4 styleName="job-title">
+        {jobTitle && jobTitle.length ? jobTitle : name}
+      </h4>
       <div styleName="button-group">
         <Button
           type={!showRates ? "segment-selected" : "segment"}
@@ -202,14 +209,14 @@ function ResultCard({ role }) {
               <IconMultipleActionsCheck />
               <div>
                 <p>Qualified candidates within</p>
-                <h6>24h</h6>
+                <h6>{timeToCandidate}h</h6>
               </div>
             </div>
             <div styleName="timeline-info">
               <IconTeamMeetingChat />
               <div>
                 <p>Interviews can start within</p>
-                <h6>48h</h6>
+                <h6>{timeToInterview}h</h6>
               </div>
             </div>
           </div>

src/routes/CreateNewTeam/components/ResultCard/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, #0ab88a 0%, #137d60 100%);
   position: relative;
@@ -40,6 +40,18 @@
   }
 }
 
+.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;
+}
+
 .button-group {
   display: flex;
   flex-direction: row;

src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx

@@ -4,7 +4,7 @@
  * Allows user to search for roles by
  * job description
  */
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import PageHeader from "components/PageHeader";
 import MarkdownEditor from "../../../../components/MarkdownEditor";
 import "./styles.module.scss";
@@ -29,6 +29,13 @@ function InputJobDescription() {
     setJdString(value);
   }, []);
 
+  const searchObject = useMemo(() => {
+    if (jobTitle && jobTitle.length) {
+      return { jobDescription: jdString, jobTitle };
+    }
+    return { jobDescription: jdString };
+  }, [jobTitle, jdString]);
+
   const onClick = useCallback(() => {
     setLoadingSkills(true);
     setSkills([]);
@@ -51,7 +58,7 @@ function InputJobDescription() {
       setStages={setStages}
       isCompletenessDisabled={jdString.length < 10 || jdString.length > 255}
       completenessStyle="input-job-description"
-      searchObject={{ jobDescription: jdString }}
+      searchObject={searchObject}
       onClick={onClick}
       toRender={(searchFunc) => (
         <div styleName="edit-container">

src/utils/helpers.js

@@ -70,4 +70,4 @@ export const setCurrentStage = (currentStepIdx, stages, setStagesCallback) => {
  * @returns {boolean} whether the role is custom/niche
  */
 export const isCustomRole = (role) =>
-  !role.name || CUSTOM_ROLE_NAMES.includes(role.name.toLowerCase());
+  !role || !role.name || CUSTOM_ROLE_NAMES.includes(role.name.toLowerCase());