Merge pull request #507 from topcoder-platform/dev

[PROD] Next Release

Author: maxceem

local/login-locally/package-lock.json

@@ -8,12 +8,12 @@ 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 IconPerson from "../../../../assets/images/icon-person.svg";
 import Curve from "../../../../assets/images/curve.svg";
 import Button from "components/Button";
 import { formatMoney } from "utils/format";
 
-function NoMatchingProfilesResultCard({ role }) {
+function NoMatchingProfilesResultCard({ role, onSubmit }) {
   const { addedRoles } = useSelector((state) => state.searchedRoles);
 
   const alreadyAdded = useMemo(() => {
@@ -35,62 +35,48 @@ function NoMatchingProfilesResultCard({ role }) {
     if (role.jobTitle && role.jobTitle.length) {
       name = role.jobTitle;
     }
-    dispatch(
-      addSearchedRole({
-        searchId,
-        name,
-        rates: role.rates,
-        imageUrl: role.imageUrl,
-      })
-    );
-  }, [dispatch, role]);
+    if (!alreadyAdded) {
+      dispatch(
+        addSearchedRole({
+          searchId,
+          isCustomRole: true,
+          name,
+          rates: role.rates,
+          imageUrl: role.imageUrl,
+        })
+      );
+    }
+    onSubmit();
+  }, [dispatch, role, alreadyAdded]);
 
   return (
     <div styleName="result-card">
       <div styleName="heading">
-        <IconEarthX />
-        <h3>Dang. No matching talent (yet)</h3>
+        <IconPerson />
+        <h3>locating available custom talent</h3>
         <Curve styleName="curve" />
-        <IconEarthX styleName="transparent-icon" />
       </div>
       <div styleName="content">
-        <h4 styleName="job-title">
-          {role.jobTitle && role.jobTitle.length
-            ? role.jobTitle
-            : "What happens next"}
-        </h4>
+        <h4 styleName="job-title">What happens next</h4>
         <p styleName="info-txt">
-          We did not find a perfect match to your requirements, but we'd like to
-          dig a little deeper into our community. We’ll start right away, and
-          this may take up to two weeks. You can modify your criteria, or
-          continue this search. If you choose to continue, we will reach out
-          soon with next steps.
+          We routinely place great people with the skills you’ve asked for.
+          Right now, we don’t have anyone available. However, our database is
+          dynamic and updated often. Please continue below so we can finalize
+          your talent request and alert you when a great candidate becomes
+          available.
         </p>
-        {role.rates && role.name ? (
-          <div styleName="niche-rate-box">
-            <p>Estimate for this role</p>
-            <p styleName="cost">{formatMoney(role.rates[0].global)}</p>
-            <p>/Week</p>
-          </div>
-        ) : (
-          <div styleName="niche-rate-box">
-            <p>Estimate for this role</p>
-            <p styleName="cost">$1,200</p>
-            <p>/Week</p>
-          </div>
-        )}
         <div styleName="button-group">
           <Link to="/taas/createnewteam">
             <Button styleName="left" type="secondary">
-              Modify Search Criteria
+              Modify Search
             </Button>
           </Link>
           <Button
             onClick={addRole}
-            disabled={!role.roleSearchRequestId || alreadyAdded}
+            disabled={!role.roleSearchRequestId}
             type="primary"
           >
-            {alreadyAdded ? "Added" : "Continue this search"}
+            Request talent
           </Button>
         </div>
       </div>
@@ -100,6 +86,7 @@ function NoMatchingProfilesResultCard({ role }) {
 
 NoMatchingProfilesResultCard.propTypes = {
   role: PT.object,
+  onSubmit: PT.func,
 };
 
 export default NoMatchingProfilesResultCard;

package-lock.json

@@ -15,7 +15,7 @@
   padding: 30px 0 60px 0;
   margin-bottom: 14px;
   color: #fff;
-  background-image: linear-gradient(225deg, #555555 0%, #2a2a2a 100%);
+  background-image: linear-gradient(90deg, #F45500 0%, #FF940F 100%);
   position: relative;
   text-align: center;
   border-radius: 8px 8px 0 0;
@@ -59,38 +59,6 @@
     width: 80%;
     text-align: center;
   }
-  .niche-rate-box {
-    margin-top: 32px;
-    background-color: #fbfbfb;
-    padding: 30px;
-    border: 1px solid #f4f4f4;
-    border-radius: 6px;
-    width: 196px;
-    p:first-child {
-      @include font-barlow;
-      margin-top: 4px;
-      font-size: 16px;
-      line-height: 20px;
-      font-weight: 600;
-      text-align: center;
-      text-transform: uppercase;
-    }
-    p:last-child {
-      @include font-roboto;
-      color: #555555;
-      font-size: 14px;
-      line-height: 22px;
-      text-align: center;
-    }
-    .cost {
-      @include font-barlow-condensed;
-      margin-top: 8px;
-      font-size: 48px;
-      line-height: 50px;
-      font-weight: 500;
-      text-align: center;
-    }
-  }
 
   .button-group {
     margin-top: 62px;
@@ -110,12 +78,3 @@
   bottom: -70px;
   width: 100%;
 }
-
-.transparent-icon {
-  position: absolute;
-  top: -40px;
-  right: 10px;
-  opacity: 12%;
-  height: 142px;
-  width: 142px;
-}

src/assets/images/icon-earth-x.svg

@@ -245,10 +245,7 @@ function ResultCard({
               </div>
             </div>
             <div styleName="timeline-info">
-              <IconTeamMeetingChat />
               <div>
-                <p>Interviews can start within</p>
-                <h6>{timeToInterview}h</h6>
               </div>
             </div>
           </div>

src/assets/images/icon-person.svg

@@ -77,7 +77,7 @@ function SearchContainer({
           currentRole={currentRole}
         />
       );
-    return <NoMatchingProfilesResultCard role={matchingRole} />;
+    return <NoMatchingProfilesResultCard role={matchingRole} onSubmit={onSubmit}/>;
   };
 
   const progressBarPercentage = useMemo(

src/assets/images/trusted-logos.svg

@@ -109,7 +109,9 @@ function SubmitContainer({
 
       position.roleSearchRequestId = key;
       position.roleName = addedRoles.find((role) => role.searchId === key).name;
-
+      const role = addedRoles.find((role) => role.searchId === key);
+      position.roleName = role.name;
+      position.isCustomRole = role.isCustomRole;
       positions.push(position);
     }
     teamObject.positions = positions;
@@ -143,6 +145,9 @@ function SubmitContainer({
             navigate("/taas/myteams/createnewteam/create-taas-payment");
           } else {
             setMsg(true);
+            teamObject.positions = _.map(teamObject.positions, (p) =>
+              _.omit(p, "isCustomRole")
+            );
             postTeamRequest(teamObject)
               .then(() => {
                 setTimeout(() => {
@@ -176,7 +181,10 @@ function SubmitContainer({
           currentRole={currentRole}
         />
       ) : (
-        <NoMatchingProfilesResultCard role={matchingRole} />
+        <NoMatchingProfilesResultCard
+          role={matchingRole}
+          onSubmit={() => setAddAnotherOpen(true)}
+        />
       )}
       <div styleName="right-side">
         <AddedRolesAccordion addedRoles={addedRoles} />

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

@@ -0,0 +1,36 @@
+/**
+ * useLoadSkills hook
+ */
+import { useEffect, useState } from "react";
+import { flatten, partition } from "lodash";
+import { useData } from "hooks/useData";
+import { getSkills } from "services/skills";
+import { getRoles } from "services/roles";
+
+/**
+ * Hook which loads all skills and roles, then partitions skills based
+ * on whether any role requires the given skill.
+ *
+ * @returns [skills, error] tuple with `skills` array and `error` object
+ */
+export const useLoadSkills = () => {
+  const [skills, skillsError] = useData(getSkills);
+  const [roles, rolesError] = useData(getRoles);
+  const [partedSkills, setPartedSkills] = useState();
+
+  useEffect(() => {
+    if (skills && roles) {
+      const requiredSkills = new Set();
+      roles.forEach((role) => {
+        role.listOfSkills.forEach((skill) => {
+          requiredSkills.add(skill);
+        });
+      });
+      setPartedSkills(() =>
+        flatten(partition(skills, (skill) => requiredSkills.has(skill.name)))
+      );
+    }
+  }, [skills, roles]);
+
+  return [partedSkills, skillsError || rolesError];
+};

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

@@ -142,6 +142,7 @@ const PaymentForm = ({ calculatedAmount }) => {
           } else if (payload.paymentIntent.status === "succeeded") {
             toastr.success("Payment is successful");
             // setRequestLoading(true);
+            teamObject.positions = _.map(teamObject.positions, p=> _.omit(p, 'isCustomRole'))
             postTeamRequest(teamObject)
               .then((res) => {
                 setProjectId(_.get(res, "data.projectId"));