{description}
- +{description}
+- We did not get a perfect match to your requirements on the first pass, - but we are confident they are out there. We'd like to dig a little - deeper into our community to find someone who can fit your needs. This - may take up to two weeks. Please continue to submit your request, and - a Topcoder representative will reach out to you soon with next steps. + 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.
{role.rates && role.name ? ({role.name} Rate
+Estimate for this role
{formatMoney(role.rates[0].global)}
/Week
Custom Rate
+Estimate for this role
$1,200
/Week
Progress
+Completeness
- We have qualified candidates who match {formatPercent(skillsMatch)} - {skillsMatch < 1 ? " or more " : " "} of your job requirements. + You’re one step closer to hiring great talent. Please provide details + about how many people you need, how long you need them, and when you’d + like to start.
Members matched
diff --git a/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss b/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss index 150884c0..d89c827a 100644 --- a/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss +++ b/src/routes/CreateNewTeam/components/ResultCard/styles.module.scss @@ -37,6 +37,7 @@ p { font-size: 14px; + width: 80%; } } @@ -71,6 +72,10 @@ display: flex; text-align: center; align-items: center; + .matching-info-left, + .matching-info-right { + flex: 1; + } > div.vertical-line { display: block; height: 170px; @@ -339,3 +344,13 @@ justify-content: space-between; height: 100%; } + +.skills-head { + @include font-barlow; + font-weight: 600; + font-size: 16px; + min-width: 124px; + text-transform: uppercase; + text-align: center; + margin-bottom: 8px; +} diff --git a/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss b/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss index 8aa70eac..96a994ca 100644 --- a/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss +++ b/src/routes/CreateNewTeam/components/RoleDetailsModal/styles.module.scss @@ -15,7 +15,7 @@ .markdown-container { :global { - // resets styles in markdown-viewer + // resets styles in markdown-viewer .tui-editor-contents { @include font-roboto; color: #2a2a2a; @@ -23,13 +23,13 @@ line-height: 26px; ul { list-style: initial; - >li { + > li { margin-bottom: 10px; &::before { background: none; } } - } + } } } } diff --git a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx index 4263abcc..ba9c16dc 100644 --- a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx +++ b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx @@ -2,6 +2,7 @@ import { Router, navigate } from "@reach/router"; import _ from "lodash"; import React, { useCallback, useState, useEffect, useMemo } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { SEARCH_STAGE_TIME } from "constants/"; import { useData } from "hooks/useData"; import { getSkills } from "services/skills"; import { searchRoles } from "services/teams"; @@ -16,7 +17,7 @@ import InputContainer from "../InputContainer"; import SearchContainer from "../SearchContainer"; import SubmitContainer from "../SubmitContainer"; -const SEARCHINGTIME = 1600; +const SEARCHINGTIME = SEARCH_STAGE_TIME * 3 + 100; function SearchAndSubmit(props) { const { stages, setStages, searchObject, onClick, page } = props; @@ -27,38 +28,24 @@ function SearchAndSubmit(props) { 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) + if (skills && matchingRole && matchingRole.matchedSkills) { + return _.map(matchingRole.matchedSkills, (s) => + _.find(skills, (skill) => skill.name === s) ); } else { return []; } - }, [skills, matchingRole, searchObject]); + }, [skills, matchingRole]); const unMatchedSkills = useMemo(() => { - if ( - skills && - matchingRole && - matchingRole.listOfSkills && - matchedSkills.length - ) { - const list = _.filter( - matchingRole.listOfSkills, - (l) => !_.find(matchedSkills, (m) => m.name === l) + if (skills && matchingRole && matchingRole.unMatchedSkills) { + return _.map(matchingRole.unMatchedSkills, (s) => + _.find(skills, (skill) => skill.name === s) ); - return _.map(list, (s) => _.find(skills, (skill) => skill.name === s)); } else { return []; } - }, [skills, matchingRole, matchedSkills]); + }, [skills, matchingRole]); useEffect(() => { const isFromInputPage = searchObject.role || @@ -119,7 +106,9 @@ function SearchAndSubmit(props) { setCurrentStage(2, stages, setStages); setSearchState("done"); }, - Date.now() - searchingBegin > SEARCHINGTIME ? 0 : 1500 + Date.now() - searchingBegin > SEARCHINGTIME + ? 0 + : SEARCH_STAGE_TIME * 3 ); }); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/src/routes/CreateNewTeam/components/SearchCard/index.jsx b/src/routes/CreateNewTeam/components/SearchCard/index.jsx index dfd365ea..20e7489d 100644 --- a/src/routes/CreateNewTeam/components/SearchCard/index.jsx +++ b/src/routes/CreateNewTeam/components/SearchCard/index.jsx @@ -9,6 +9,7 @@ import IconEarthSearch from "../../../../assets/images/icon-earth-search.svg"; import WorldMapDotted from "../../../../assets/images/world-map-dotted.svg"; import WorldMapSearch1 from "../../../../assets/images/world-map-search1.svg"; import WorldMapSearch2 from "../../../../assets/images/world-map-search2.svg"; +import { SEARCH_STAGE_TIME } from "constants/"; function SearchCard() { const [searchState, setSearchState] = useState(null); @@ -19,8 +20,8 @@ function SearchCard() { setSearchState("state1"); timer2 = setTimeout(() => { setSearchState("state2"); - }, 500); - }, 500); + }, SEARCH_STAGE_TIME); + }, SEARCH_STAGE_TIME); return () => { clearTimeout(timer1); diff --git a/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss b/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss index 99cec905..c1331790 100644 --- a/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss +++ b/src/routes/CreateNewTeam/components/SearchContainer/styles.module.scss @@ -3,7 +3,7 @@ flex-direction: row; justify-content: center; align-items: flex-start; - margin: 42px 35px; + margin: 42px 35px 30px; .right-side { display: flex; flex-direction: column; @@ -11,4 +11,4 @@ margin-top: 16px; } } -} \ No newline at end of file +} diff --git a/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss b/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss index b05fd4c4..26ac585f 100644 --- a/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss +++ b/src/routes/CreateNewTeam/components/SkillTag/styles.module.scss @@ -4,23 +4,21 @@ align-items: center; height: 32px; border-radius: 32px; - border: 1px solid #0AB88A; - color: #2A2A2A; + 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; - + border-color: #ef476f; + background-color: #e9e9e9; + color: #2a2a2a; } } .item-card { diff --git a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx index 4bae541c..86faa01c 100644 --- a/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx +++ b/src/routes/CreateNewTeam/components/SubmitContainer/index.jsx @@ -115,28 +115,32 @@ function SubmitContainer({ setTeamDetailsOpen(false); setTeamObject(teamObject); + requestTeam(teamObject); }; - const requestTeam = useCallback(() => { - setRequestLoading(true); - if (matchingRole.isExternalMember) { - dispatch(addTeamObjects(teamObject)); - navigate("/taas/myteams/createnewteam/create-taas-payment"); - } else { - postTeamRequest(teamObject) - .then(() => { - setTimeout(() => { - dispatch(clearSearchedRoles()); - // Backend api create project has sync issue, so delay 2 seconds - navigate("/taas/myteams"); - }, 2000); - }) - .catch((err) => { - setRequestLoading(false); - toastr.error("Error Requesting Team", err.message); - }); - } - }, [dispatch, teamObject]); + const requestTeam = useCallback( + (teamObject) => { + setRequestLoading(true); + if (matchingRole.isExternalMember) { + dispatch(addTeamObjects(teamObject)); + navigate("/taas/myteams/createnewteam/create-taas-payment"); + } else { + postTeamRequest(teamObject) + .then(() => { + setTimeout(() => { + dispatch(clearSearchedRoles()); + // Backend api create project has sync issue, so delay 2 seconds + navigate("/taas/myteams"); + }, 2000); + }) + .catch((err) => { + setRequestLoading(false); + toastr.error("Error Requesting Team", err.message); + }); + } + }, + [dispatch, teamObject] + ); return (