Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Taas Platform - Role & Skills Intake - Search part of Front-end #302

Merged
merged 2 commits into from
Jun 11, 2021
Merged

Taas Platform - Role & Skills Intake - Search part of Front-end #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
39c1cb8
Taas Platform - Role & Skills Intake - Search part of Front-end
yoution Jun 10, 2021
7423cb3
feat: add mock test
yoution Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions config/dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,7 @@ module.exports = {
V5: "https://api.topcoder-dev.com/v5", //"http://localhost:3030/api/v5"
V3: "https://api.topcoder-dev.com/v3",
},

// matching rate for search role result page
MATCHING_RATE: process.env.MATCHING_RATE || 80,
};
3 changes: 3 additions & 0 deletions config/prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,7 @@ module.exports = {
V5: "https://api.topcoder.com/v5",
V3: "https://api.topcoder.com/v3",
},

// matching rate for search role result page
MATCHING_RATE: process.env.MATCHING_RATE || 80,
};
4 changes: 2 additions & 2 deletions src/root.component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ export default function Root() {
<PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates" />
<TeamAccess path="/taas/myteams/:teamId/access" />
<InputJobDescription path="/taas/myteams/createnewteam/jd" />
<InputSkills path="/taas/myteams/createnewteam/:projectId/skills" />
<SelectRole path="/taas/myteams/createnewteam/:projectId/role" />
<InputSkills path="/taas/myteams/createnewteam/skills" />
<SelectRole path="/taas/myteams/createnewteam/role" />
</Router>

{/* Global config for Toastr popups */}
Expand Down
0 .../components/AddedRolesAccordion/index.jsx → .../components/AddedRolesAccordion/index.jsx
View file
Open in desktop
File renamed without changes.
0 ...ts/AddedRolesAccordion/styles.module.scss → ...ts/AddedRolesAccordion/styles.module.scss
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions src/routes/CreateNewTeam/components/Completeness/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
position: relative;
width: 250px;
color: #fff;
overflow: hidden;
button {
border: none;
}
Expand Down
15 changes: 12 additions & 3 deletions src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@
* Card that appears when there are no matching profiles after searching.
*/
import React from "react";
import PT from "prop-types";
import { navigate } from "@reach/router";
import {
formatMoney,
} from "utils/format";
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";

function NoMatchingProfilesResultCard() {
function NoMatchingProfilesResultCard({rates = [{global: 0}], onSearch}) {
return (
<div styleName="result-card">
<div styleName="heading">
Expand All @@ -25,11 +29,11 @@ function NoMatchingProfilesResultCard() {
</p>
<div styleName="niche-rate-box">
<p>Niche Rate</p>
<p styleName="cost">$1,200</p>
<p styleName="cost">{formatMoney(rates[0].global)}</p>
<p>/Week</p>
</div>
<Button
onClick={() => navigate("/taas/myteams/createnewteam")}
onClick={onSearch}
type="secondary"
styleName="button"
>
Expand All @@ -40,4 +44,9 @@ function NoMatchingProfilesResultCard() {
);
}

NoMatchingProfilesResultCard.propTypes = {
onSearch: PT.func,
rates: PT.array,
};

export default NoMatchingProfilesResultCard;
1 change: 1 addition & 0 deletions src/routes/CreateNewTeam/components/NoMatchingProfilesResultCard/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
.result-card {
@include rounded-card;
max-width: 746px;
overflow: hidden;
width: 50vw;
margin-right: 30px;
}
Expand Down
89 changes: 52 additions & 37 deletions src/routes/CreateNewTeam/components/ResultCard/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@
* about costs and number of matching candidates.
*/
import React, { useState, useEffect } from "react";
import PT from "prop-types";
import cn from "classnames";
import _ from "lodash";
import {
formatMoney,
} from "utils/format";
import { getAuthUserProfile } from "@topcoder/micro-frontends-navbar-app";
import config from '../../../../../config';
import "./styles.module.scss";
import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
import IconMultipleUsers from "../../../../assets/images/icon-multiple-users.svg";
Expand All @@ -16,9 +22,15 @@ import Curve from "../../../../assets/images/curve.svg";
import CircularProgressBar from "../CircularProgressBar";
import Button from "components/Button";

function ResultCard() {
function ResultCard({
numberOfMembersAvailable,
numberOfMembers,
timeToCandidate,
timeToInterview,
isExternalMember,
rates
}) {
const [userHandle, setUserHandle] = useState("handle");
const [showSpecialRates, setShowSpecialRates] = useState(false);
const [showRates, setShowRates] = useState(false);

useEffect(() => {
Expand All @@ -29,16 +41,11 @@ function ResultCard() {

return (
<div styleName="result-card">
<div
role="button"
tabIndex="0"
onClick={() => setShowSpecialRates(!showSpecialRates)}
styleName={cn("heading", { ["non-clickable"]: !showRates })}
>
<div styleName="heading">
<IconEarthCheck />
<h3>We have matching profiles</h3>
<p>
We have qualified candidates who match 80% or more of your job
We have qualified candidates who match {config.MATCHING_RATE}% or more of your job
requirements.
</p>
<Curve styleName="curve" />
Expand All @@ -60,7 +67,7 @@ function ResultCard() {
Rate Details
</Button>
</div>
{showRates && showSpecialRates && (
{showRates && !isExternalMember && (
<div styleName="xeno-rates">
<p styleName="greeting-txt">
Hi {userHandle}, we have special rates for you as a Xeno User!
Expand All @@ -72,23 +79,23 @@ function ResultCard() {
<p>(40h / week)</p>
</div>
<div styleName="senior">
<h4>Senior Member</h4>
<h4>Global Rate</h4>
<div styleName="cost">
<h4>$2,000</h4>
<h4>{formatMoney(rates[0].global)}</h4>
<p>/Week</p>
</div>
</div>
<div styleName="standard">
<h4>Standard Member</h4>
<h4>In-Conutry Rate</h4>
<div styleName="cost">
<h4>$1,500</h4>
<h4>{formatMoney(rates[0].inCountry)}</h4>
<p>/Week</p>
</div>
</div>
<div styleName="junior">
<h4>Junior Member</h4>
<h4>Offshore Rate</h4>
<div styleName="cost">
<h4>$1,000</h4>
<h4>{formatMoney(rates[0].offShore)}</h4>
<p>/Week</p>
</div>
</div>
Expand All @@ -99,23 +106,23 @@ function ResultCard() {
<p>(30h / week)</p>
</div>
<div styleName="senior">
<h4>Senior Member</h4>
<h4>Global Rate</h4>
<div styleName="cost">
<h4>$1,800</h4>
<h4>{formatMoney(rates[0].rate30Global)}</h4>
<p>/Week</p>
</div>
</div>
<div styleName="standard">
<h4>Standard Member</h4>
<h4>In-Conutry Rate</h4>
<div styleName="cost">
<h4>$1,300</h4>
<h4>{formatMoney(rates[0].rate30InCountry)}</h4>
<p>/Week</p>
</div>
</div>
<div styleName="junior">
<h4>Junior Member</h4>
<h4>Offshore Rate</h4>
<div styleName="cost">
<h4>$800</h4>
<h4>{formatMoney(rates[0].rate30OffShore)}</h4>
<p>/Week</p>
</div>
</div>
Expand All @@ -126,31 +133,31 @@ function ResultCard() {
<p>(20h / week)</p>
</div>
<div styleName="senior">
<h4>Senior Member</h4>
<h4>Global Rate</h4>
<div styleName="cost">
<h4>$1,600</h4>
<h4>{formatMoney(rates[0].rate20Global)}</h4>
<p>/Week</p>
</div>
</div>
<div styleName="standard">
<h4>Standard Member</h4>
<h4>In-Conutry Rate</h4>
<div styleName="cost">
<h4>$1,100</h4>
<h4>{formatMoney(rates[0].rate20InCountry)}</h4>
<p>/Week</p>
</div>
</div>
<div styleName="junior">
<h4>Junior Member</h4>
<h4>Offshore Rate</h4>
<div styleName="cost">
<h4>$600</h4>
<h4>{formatMoney(rates[0].rate20OffShore)}</h4>
<p>/Week</p>
</div>
</div>
</div>
</div>
</div>
)}
{showRates && !showSpecialRates && (
{showRates && isExternalMember && (
<div styleName="rate-content">
<div styleName="rate-left-side">
<div styleName="cost-info">
Expand All @@ -159,7 +166,7 @@ function ResultCard() {
<p>(40h / week)</p>
</div>
<div styleName="weekly-rate">
<h5>$1,800</h5>
<h5>{formatMoney(rates[0].global)}</h5>
<p>/Week</p>
</div>
</div>
Expand All @@ -169,7 +176,7 @@ function ResultCard() {
<p>(30h / week)</p>
</div>
<div styleName="weekly-rate">
<h5>$1,250</h5>
<h5>{formatMoney(rates[0].inCountry)}</h5>
<p>/Week</p>
</div>
</div>
Expand All @@ -179,7 +186,7 @@ function ResultCard() {
<p>(20h / week)</p>
</div>
<div styleName="weekly-rate">
<h5>$800</h5>
<h5>{formatMoney(rates[0].offShore)}</h5>
<p>/Week</p>
</div>
</div>
Expand All @@ -190,14 +197,14 @@ function ResultCard() {
<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>
Expand All @@ -209,11 +216,11 @@ function ResultCard() {
<div>
<CircularProgressBar
size="160"
progress="80"
progress={config.MATCHING_RATE}
strokeWidth="6"
children={
<div styleName="progressbar-child">
<h4>80%</h4>
<h4>{config.MATCHING_RATE}%</h4>
<p>Matching rate</p>
</div>
}
Expand All @@ -222,7 +229,7 @@ function ResultCard() {
<div styleName="vertical-line" />
<div>
<IconMultipleUsers styleName="users" />
<h4>300+</h4>
<h4>{numberOfMembersAvailable}+</h4>
<p>Members matched</p>
</div>
</div>
Expand All @@ -246,4 +253,12 @@ function ResultCard() {
);
}

ResultCard.propTypes = {
numberOfMembersAvailable:PT.number,
numberOfMembers: PT.string,
timeToCandidate: PT.number,
timeToInterview: PT.number,
isExternalMember: PT.bool,
rates: PT.array,
};
export default ResultCard;
10 changes: 8 additions & 2 deletions src/routes/CreateNewTeam/components/ResultCard/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
.result-card {
@include rounded-card;
max-width: 746px;
overflow: hidden;
width: 50vw;
margin-right: 30px;
}
Expand All @@ -23,7 +24,6 @@
position: relative;
text-align: center;
border-radius: 8px 8px 0 0;
cursor: pointer;

svg {
margin-bottom: 8px;
Expand Down Expand Up @@ -72,9 +72,12 @@
margin: 0 40px;
}
.progressbar-child {
margin-top: 5px;
width: 90px;
height: 90px;
overflow: hidden;
> h4 {
margin-top: 10px;
}
}
}

Expand Down Expand Up @@ -154,6 +157,9 @@
&:not(:first-child) {
margin-left: 40px;
}
&:not(:last-child) {
border-right: 1px solid #E9E9E9;
}

.rate-heading {
display: flex;
Expand Down
Loading