55 * about costs and number of matching candidates.
66 */
77import React , { useState , useEffect } from "react" ;
8- import PT from "prop-types" ;
98import cn from "classnames" ;
10- import _ from "lodash" ;
11- import {
12- formatMoney ,
13- } from "utils/format" ;
149import { getAuthUserProfile } from "@topcoder/micro-frontends-navbar-app" ;
15- import config from '../../../../../config' ;
1610import "./styles.module.scss" ;
1711import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg" ;
1812import IconMultipleUsers from "../../../../assets/images/icon-multiple-users.svg" ;
@@ -22,15 +16,9 @@ import Curve from "../../../../assets/images/curve.svg";
2216import CircularProgressBar from "../CircularProgressBar" ;
2317import Button from "components/Button" ;
2418
25- function ResultCard ( {
26- numberOfMembersAvailable,
27- numberOfMembers,
28- timeToCandidate,
29- timeToInterview,
30- isExternalMember,
31- rates
32- } ) {
19+ function ResultCard ( ) {
3320 const [ userHandle , setUserHandle ] = useState ( "handle" ) ;
21+ const [ showSpecialRates , setShowSpecialRates ] = useState ( false ) ;
3422 const [ showRates , setShowRates ] = useState ( false ) ;
3523
3624 useEffect ( ( ) => {
@@ -41,11 +29,16 @@ function ResultCard({
4129
4230 return (
4331 < div styleName = "result-card" >
44- < div styleName = "heading" >
32+ < div
33+ role = "button"
34+ tabIndex = "0"
35+ onClick = { ( ) => setShowSpecialRates ( ! showSpecialRates ) }
36+ styleName = { cn ( "heading" , { [ "non-clickable" ] : ! showRates } ) }
37+ >
4538 < IconEarthCheck />
4639 < h3 > We have matching profiles</ h3 >
4740 < p >
48- We have qualified candidates who match { config . MATCHING_RATE } % or more of your job
41+ We have qualified candidates who match 80 % or more of your job
4942 requirements.
5043 </ p >
5144 < Curve styleName = "curve" />
@@ -67,7 +60,7 @@ function ResultCard({
6760 Rate Details
6861 </ Button >
6962 </ div >
70- { showRates && ! isExternalMember && (
63+ { showRates && showSpecialRates && (
7164 < div styleName = "xeno-rates" >
7265 < p styleName = "greeting-txt" >
7366 Hi { userHandle } , we have special rates for you as a Xeno User!
@@ -79,23 +72,23 @@ function ResultCard({
7972 < p > (40h / week)</ p >
8073 </ div >
8174 < div styleName = "senior" >
82- < h4 > Global Rate </ h4 >
75+ < h4 > Senior Member </ h4 >
8376 < div styleName = "cost" >
84- < h4 > { formatMoney ( rates [ 0 ] . global ) } </ h4 >
77+ < h4 > $2,000 </ h4 >
8578 < p > /Week</ p >
8679 </ div >
8780 </ div >
8881 < div styleName = "standard" >
89- < h4 > In-Conutry Rate </ h4 >
82+ < h4 > Standard Member </ h4 >
9083 < div styleName = "cost" >
91- < h4 > { formatMoney ( rates [ 0 ] . inCountry ) } </ h4 >
84+ < h4 > $1,500 </ h4 >
9285 < p > /Week</ p >
9386 </ div >
9487 </ div >
9588 < div styleName = "junior" >
96- < h4 > Offshore Rate </ h4 >
89+ < h4 > Junior Member </ h4 >
9790 < div styleName = "cost" >
98- < h4 > { formatMoney ( rates [ 0 ] . offShore ) } </ h4 >
91+ < h4 > $1,000 </ h4 >
9992 < p > /Week</ p >
10093 </ div >
10194 </ div >
@@ -106,23 +99,23 @@ function ResultCard({
10699 < p > (30h / week)</ p >
107100 </ div >
108101 < div styleName = "senior" >
109- < h4 > Global Rate </ h4 >
102+ < h4 > Senior Member </ h4 >
110103 < div styleName = "cost" >
111- < h4 > { formatMoney ( rates [ 0 ] . rate30Global ) } </ h4 >
104+ < h4 > $1,800 </ h4 >
112105 < p > /Week</ p >
113106 </ div >
114107 </ div >
115108 < div styleName = "standard" >
116- < h4 > In-Conutry Rate </ h4 >
109+ < h4 > Standard Member </ h4 >
117110 < div styleName = "cost" >
118- < h4 > { formatMoney ( rates [ 0 ] . rate30InCountry ) } </ h4 >
111+ < h4 > $1,300 </ h4 >
119112 < p > /Week</ p >
120113 </ div >
121114 </ div >
122115 < div styleName = "junior" >
123- < h4 > Offshore Rate </ h4 >
116+ < h4 > Junior Member </ h4 >
124117 < div styleName = "cost" >
125- < h4 > { formatMoney ( rates [ 0 ] . rate30OffShore ) } </ h4 >
118+ < h4 > $800 </ h4 >
126119 < p > /Week</ p >
127120 </ div >
128121 </ div >
@@ -133,31 +126,31 @@ function ResultCard({
133126 < p > (20h / week)</ p >
134127 </ div >
135128 < div styleName = "senior" >
136- < h4 > Global Rate </ h4 >
129+ < h4 > Senior Member </ h4 >
137130 < div styleName = "cost" >
138- < h4 > { formatMoney ( rates [ 0 ] . rate20Global ) } </ h4 >
131+ < h4 > $1,600 </ h4 >
139132 < p > /Week</ p >
140133 </ div >
141134 </ div >
142135 < div styleName = "standard" >
143- < h4 > In-Conutry Rate </ h4 >
136+ < h4 > Standard Member </ h4 >
144137 < div styleName = "cost" >
145- < h4 > { formatMoney ( rates [ 0 ] . rate20InCountry ) } </ h4 >
138+ < h4 > $1,100 </ h4 >
146139 < p > /Week</ p >
147140 </ div >
148141 </ div >
149142 < div styleName = "junior" >
150- < h4 > Offshore Rate </ h4 >
143+ < h4 > Junior Member </ h4 >
151144 < div styleName = "cost" >
152- < h4 > { formatMoney ( rates [ 0 ] . rate20OffShore ) } </ h4 >
145+ < h4 > $600 </ h4 >
153146 < p > /Week</ p >
154147 </ div >
155148 </ div >
156149 </ div >
157150 </ div >
158151 </ div >
159152 ) }
160- { showRates && isExternalMember && (
153+ { showRates && ! showSpecialRates && (
161154 < div styleName = "rate-content" >
162155 < div styleName = "rate-left-side" >
163156 < div styleName = "cost-info" >
@@ -166,7 +159,7 @@ function ResultCard({
166159 < p > (40h / week)</ p >
167160 </ div >
168161 < div styleName = "weekly-rate" >
169- < h5 > { formatMoney ( rates [ 0 ] . global ) } </ h5 >
162+ < h5 > $1,800 </ h5 >
170163 < p > /Week</ p >
171164 </ div >
172165 </ div >
@@ -176,7 +169,7 @@ function ResultCard({
176169 < p > (30h / week)</ p >
177170 </ div >
178171 < div styleName = "weekly-rate" >
179- < h5 > { formatMoney ( rates [ 0 ] . inCountry ) } </ h5 >
172+ < h5 > $1,250 </ h5 >
180173 < p > /Week</ p >
181174 </ div >
182175 </ div >
@@ -186,7 +179,7 @@ function ResultCard({
186179 < p > (20h / week)</ p >
187180 </ div >
188181 < div styleName = "weekly-rate" >
189- < h5 > { formatMoney ( rates [ 0 ] . offShore ) } </ h5 >
182+ < h5 > $800 </ h5 >
190183 < p > /Week</ p >
191184 </ div >
192185 </ div >
@@ -197,14 +190,14 @@ function ResultCard({
197190 < IconMultipleActionsCheck />
198191 < div >
199192 < p > Qualified candidates within</ p >
200- < h6 > { timeToCandidate } h </ h6 >
193+ < h6 > 24h </ h6 >
201194 </ div >
202195 </ div >
203196 < div styleName = "timeline-info" >
204197 < IconTeamMeetingChat />
205198 < div >
206199 < p > Interviews can start within</ p >
207- < h6 > { timeToInterview } h </ h6 >
200+ < h6 > 48h </ h6 >
208201 </ div >
209202 </ div >
210203 </ div >
@@ -216,11 +209,11 @@ function ResultCard({
216209 < div >
217210 < CircularProgressBar
218211 size = "160"
219- progress = { config . MATCHING_RATE }
212+ progress = "80"
220213 strokeWidth = "6"
221214 children = {
222215 < div styleName = "progressbar-child" >
223- < h4 > { config . MATCHING_RATE } %</ h4 >
216+ < h4 > 80 %</ h4 >
224217 < p > Matching rate</ p >
225218 </ div >
226219 }
@@ -229,7 +222,7 @@ function ResultCard({
229222 < div styleName = "vertical-line" />
230223 < div >
231224 < IconMultipleUsers styleName = "users" />
232- < h4 > { numberOfMembersAvailable } +</ h4 >
225+ < h4 > 300 +</ h4 >
233226 < p > Members matched</ p >
234227 </ div >
235228 </ div >
@@ -253,12 +246,4 @@ function ResultCard({
253246 ) ;
254247}
255248
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- } ;
264249export default ResultCard ;
0 commit comments