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

Commit a2f188d

Browse files
nikolay83nikolay83
authored
Merge pull request #302 from yoution/feature/frontend-search
Taas Platform - Role & Skills Intake - Search part of Front-end - 472451
2 parents 89afba3 + 7423cb3 commit a2f188d

File tree

24 files changed

+529
-309
lines changed

24 files changed

+529
-309
lines changed

‎config/dev.js

+3
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,7 @@ module.exports = {
1313
V5: "https://api.topcoder-dev.com/v5", //"http://localhost:3030/api/v5"
1414
V3: "https://api.topcoder-dev.com/v3",
1515
},
16+
17+
// matching rate for search role result page
18+
MATCHING_RATE: process.env.MATCHING_RATE || 80,
1619
};

‎config/prod.js

+3
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,7 @@ module.exports = {
1313
V5: "https://api.topcoder.com/v5",
1414
V3: "https://api.topcoder.com/v3",
1515
},
16+
17+
// matching rate for search role result page
18+
MATCHING_RATE: process.env.MATCHING_RATE || 80,
1619
};

‎src/root.component.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ export default function Root() {
3535
<PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates" />
3636
<TeamAccess path="/taas/myteams/:teamId/access" />
3737
<InputJobDescription path="/taas/myteams/createnewteam/jd" />
38-
<InputSkills path="/taas/myteams/createnewteam/:projectId/skills" />
39-
<SelectRole path="/taas/myteams/createnewteam/:projectId/role" />
38+
<InputSkills path="/taas/myteams/createnewteam/skills" />
39+
<SelectRole path="/taas/myteams/createnewteam/role" />
4040
</Router>
4141

4242
{/* Global config for Toastr popups */}

‎src/routes/CreateNewTeam/pages/SelectRole/components/AddedRolesAccordion/index.jsx renamed to ‎src/routes/CreateNewTeam/components/AddedRolesAccordion/index.jsx

File renamed without changes.

‎src/routes/CreateNewTeam/pages/SelectRole/components/AddedRolesAccordion/styles.module.scss renamed to ‎src/routes/CreateNewTeam/components/AddedRolesAccordion/styles.module.scss

File renamed without changes.

‎src/routes/CreateNewTeam/components/Completeness/styles.module.scss

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
position: relative;
77
width: 250px;
88
color: #fff;
9+
overflow: hidden;
910
button {
1011
border: none;
1112
}

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

+12-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@
33
* Card that appears when there are no matching profiles after searching.
44
*/
55
import React from "react";
6+
import PT from "prop-types";
67
import { navigate } from "@reach/router";
8+
import {
9+
formatMoney,
10+
} from "utils/format";
711
import "./styles.module.scss";
812
import IconEarthX from "../../../../assets/images/icon-earth-x.svg";
913
import Curve from "../../../../assets/images/curve.svg";
1014
import Button from "components/Button";
1115

12-
function NoMatchingProfilesResultCard() {
16+
function NoMatchingProfilesResultCard({rates = [{global: 0}], onSearch}) {
1317
return (
1418
<div styleName="result-card">
1519
<div styleName="heading">
@@ -25,11 +29,11 @@ function NoMatchingProfilesResultCard() {
2529
</p>
2630
<div styleName="niche-rate-box">
2731
<p>Niche Rate</p>
28-
<p styleName="cost">$1,200</p>
32+
<p styleName="cost">{formatMoney(rates[0].global)}</p>
2933
<p>/Week</p>
3034
</div>
3135
<Button
32-
onClick={() => navigate("/taas/myteams/createnewteam")}
36+
onClick={onSearch}
3337
type="secondary"
3438
styleName="button"
3539
>
@@ -40,4 +44,9 @@ function NoMatchingProfilesResultCard() {
4044
);
4145
}
4246

47+
NoMatchingProfilesResultCard.propTypes = {
48+
onSearch: PT.func,
49+
rates: PT.array,
50+
};
51+
4352
export default NoMatchingProfilesResultCard;

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

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
.result-card {
44
@include rounded-card;
55
max-width: 746px;
6+
overflow: hidden;
67
width: 50vw;
78
margin-right: 30px;
89
}

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

+52-37
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,14 @@
55
* about costs and number of matching candidates.
66
*/
77
import React, { useState, useEffect } from "react";
8+
import PT from "prop-types";
89
import cn from "classnames";
10+
import _ from "lodash";
11+
import {
12+
formatMoney,
13+
} from "utils/format";
914
import { getAuthUserProfile } from "@topcoder/micro-frontends-navbar-app";
15+
import config from '../../../../../config';
1016
import "./styles.module.scss";
1117
import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
1218
import IconMultipleUsers from "../../../../assets/images/icon-multiple-users.svg";
@@ -16,9 +22,15 @@ import Curve from "../../../../assets/images/curve.svg";
1622
import CircularProgressBar from "../CircularProgressBar";
1723
import Button from "components/Button";
1824

19-
function ResultCard() {
25+
function ResultCard({
26+
numberOfMembersAvailable,
27+
numberOfMembers,
28+
timeToCandidate,
29+
timeToInterview,
30+
isExternalMember,
31+
rates
32+
}) {
2033
const [userHandle, setUserHandle] = useState("handle");
21-
const [showSpecialRates, setShowSpecialRates] = useState(false);
2234
const [showRates, setShowRates] = useState(false);
2335

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

3042
return (
3143
<div styleName="result-card">
32-
<div
33-
role="button"
34-
tabIndex="0"
35-
onClick={() => setShowSpecialRates(!showSpecialRates)}
36-
styleName={cn("heading", { ["non-clickable"]: !showRates })}
37-
>
44+
<div styleName="heading">
3845
<IconEarthCheck />
3946
<h3>We have matching profiles</h3>
4047
<p>
41-
We have qualified candidates who match 80% or more of your job
48+
We have qualified candidates who match {config.MATCHING_RATE}% or more of your job
4249
requirements.
4350
</p>
4451
<Curve styleName="curve" />
@@ -60,7 +67,7 @@ function ResultCard() {
6067
Rate Details
6168
</Button>
6269
</div>
63-
{showRates && showSpecialRates && (
70+
{showRates && !isExternalMember && (
6471
<div styleName="xeno-rates">
6572
<p styleName="greeting-txt">
6673
Hi {userHandle}, we have special rates for you as a Xeno User!
@@ -72,23 +79,23 @@ function ResultCard() {
7279
<p>(40h / week)</p>
7380
</div>
7481
<div styleName="senior">
75-
<h4>Senior Member</h4>
82+
<h4>Global Rate</h4>
7683
<div styleName="cost">
77-
<h4>$2,000</h4>
84+
<h4>{formatMoney(rates[0].global)}</h4>
7885
<p>/Week</p>
7986
</div>
8087
</div>
8188
<div styleName="standard">
82-
<h4>Standard Member</h4>
89+
<h4>In-Conutry Rate</h4>
8390
<div styleName="cost">
84-
<h4>$1,500</h4>
91+
<h4>{formatMoney(rates[0].inCountry)}</h4>
8592
<p>/Week</p>
8693
</div>
8794
</div>
8895
<div styleName="junior">
89-
<h4>Junior Member</h4>
96+
<h4>Offshore Rate</h4>
9097
<div styleName="cost">
91-
<h4>$1,000</h4>
98+
<h4>{formatMoney(rates[0].offShore)}</h4>
9299
<p>/Week</p>
93100
</div>
94101
</div>
@@ -99,23 +106,23 @@ function ResultCard() {
99106
<p>(30h / week)</p>
100107
</div>
101108
<div styleName="senior">
102-
<h4>Senior Member</h4>
109+
<h4>Global Rate</h4>
103110
<div styleName="cost">
104-
<h4>$1,800</h4>
111+
<h4>{formatMoney(rates[0].rate30Global)}</h4>
105112
<p>/Week</p>
106113
</div>
107114
</div>
108115
<div styleName="standard">
109-
<h4>Standard Member</h4>
116+
<h4>In-Conutry Rate</h4>
110117
<div styleName="cost">
111-
<h4>$1,300</h4>
118+
<h4>{formatMoney(rates[0].rate30InCountry)}</h4>
112119
<p>/Week</p>
113120
</div>
114121
</div>
115122
<div styleName="junior">
116-
<h4>Junior Member</h4>
123+
<h4>Offshore Rate</h4>
117124
<div styleName="cost">
118-
<h4>$800</h4>
125+
<h4>{formatMoney(rates[0].rate30OffShore)}</h4>
119126
<p>/Week</p>
120127
</div>
121128
</div>
@@ -126,31 +133,31 @@ function ResultCard() {
126133
<p>(20h / week)</p>
127134
</div>
128135
<div styleName="senior">
129-
<h4>Senior Member</h4>
136+
<h4>Global Rate</h4>
130137
<div styleName="cost">
131-
<h4>$1,600</h4>
138+
<h4>{formatMoney(rates[0].rate20Global)}</h4>
132139
<p>/Week</p>
133140
</div>
134141
</div>
135142
<div styleName="standard">
136-
<h4>Standard Member</h4>
143+
<h4>In-Conutry Rate</h4>
137144
<div styleName="cost">
138-
<h4>$1,100</h4>
145+
<h4>{formatMoney(rates[0].rate20InCountry)}</h4>
139146
<p>/Week</p>
140147
</div>
141148
</div>
142149
<div styleName="junior">
143-
<h4>Junior Member</h4>
150+
<h4>Offshore Rate</h4>
144151
<div styleName="cost">
145-
<h4>$600</h4>
152+
<h4>{formatMoney(rates[0].rate20OffShore)}</h4>
146153
<p>/Week</p>
147154
</div>
148155
</div>
149156
</div>
150157
</div>
151158
</div>
152159
)}
153-
{showRates && !showSpecialRates && (
160+
{showRates && isExternalMember && (
154161
<div styleName="rate-content">
155162
<div styleName="rate-left-side">
156163
<div styleName="cost-info">
@@ -159,7 +166,7 @@ function ResultCard() {
159166
<p>(40h / week)</p>
160167
</div>
161168
<div styleName="weekly-rate">
162-
<h5>$1,800</h5>
169+
<h5>{formatMoney(rates[0].global)}</h5>
163170
<p>/Week</p>
164171
</div>
165172
</div>
@@ -169,7 +176,7 @@ function ResultCard() {
169176
<p>(30h / week)</p>
170177
</div>
171178
<div styleName="weekly-rate">
172-
<h5>$1,250</h5>
179+
<h5>{formatMoney(rates[0].inCountry)}</h5>
173180
<p>/Week</p>
174181
</div>
175182
</div>
@@ -179,7 +186,7 @@ function ResultCard() {
179186
<p>(20h / week)</p>
180187
</div>
181188
<div styleName="weekly-rate">
182-
<h5>$800</h5>
189+
<h5>{formatMoney(rates[0].offShore)}</h5>
183190
<p>/Week</p>
184191
</div>
185192
</div>
@@ -190,14 +197,14 @@ function ResultCard() {
190197
<IconMultipleActionsCheck />
191198
<div>
192199
<p>Qualified candidates within</p>
193-
<h6>24h</h6>
200+
<h6>{timeToCandidate}h</h6>
194201
</div>
195202
</div>
196203
<div styleName="timeline-info">
197204
<IconTeamMeetingChat />
198205
<div>
199206
<p>Interviews can start within</p>
200-
<h6>48h</h6>
207+
<h6>{timeToInterview}h</h6>
201208
</div>
202209
</div>
203210
</div>
@@ -209,11 +216,11 @@ function ResultCard() {
209216
<div>
210217
<CircularProgressBar
211218
size="160"
212-
progress="80"
219+
progress={config.MATCHING_RATE}
213220
strokeWidth="6"
214221
children={
215222
<div styleName="progressbar-child">
216-
<h4>80%</h4>
223+
<h4>{config.MATCHING_RATE}%</h4>
217224
<p>Matching rate</p>
218225
</div>
219226
}
@@ -222,7 +229,7 @@ function ResultCard() {
222229
<div styleName="vertical-line" />
223230
<div>
224231
<IconMultipleUsers styleName="users" />
225-
<h4>300+</h4>
232+
<h4>{numberOfMembersAvailable}+</h4>
226233
<p>Members matched</p>
227234
</div>
228235
</div>
@@ -246,4 +253,12 @@ function ResultCard() {
246253
);
247254
}
248255

256+
ResultCard.propTypes = {
257+
numberOfMembersAvailable:PT.number,
258+
numberOfMembers: PT.string,
259+
timeToCandidate: PT.number,
260+
timeToInterview: PT.number,
261+
isExternalMember: PT.bool,
262+
rates: PT.array,
263+
};
249264
export default ResultCard;

‎src/routes/CreateNewTeam/components/ResultCard/styles.module.scss

+8-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
.result-card {
44
@include rounded-card;
55
max-width: 746px;
6+
overflow: hidden;
67
width: 50vw;
78
margin-right: 30px;
89
}
@@ -23,7 +24,6 @@
2324
position: relative;
2425
text-align: center;
2526
border-radius: 8px 8px 0 0;
26-
cursor: pointer;
2727

2828
svg {
2929
margin-bottom: 8px;
@@ -72,9 +72,12 @@
7272
margin: 0 40px;
7373
}
7474
.progressbar-child {
75-
margin-top: 5px;
7675
width: 90px;
7776
height: 90px;
77+
overflow: hidden;
78+
> h4 {
79+
margin-top: 10px;
80+
}
7881
}
7982
}
8083

@@ -154,6 +157,9 @@
154157
&:not(:first-child) {
155158
margin-left: 40px;
156159
}
160+
&:not(:last-child) {
161+
border-right: 1px solid #E9E9E9;
162+
}
157163

158164
.rate-heading {
159165
display: flex;

0 commit comments

Comments
 (0)