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

Commit 182e489

Browse files
LieutenantRogerLieutenantRoger
committed
UI Update finish
1 parent b32a626 commit 182e489

File tree

8 files changed

+290
-21
lines changed

8 files changed

+290
-21
lines changed

‎src/assets/images/company-logo.svg‎

Lines changed: 22 additions & 0 deletions
Loading

‎src/assets/images/completed.svg‎

Lines changed: 11 additions & 0 deletions
Loading

‎src/constants/index.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,10 +353,10 @@ export const SORT_STATUS_ORDER = [
353353
MY_GIG_PHASE.PHONE_SCREEN,
354354
MY_GIG_PHASE.SKILLS_TEST,
355355
MY_GIG_PHASE.APPLIED,
356+
MY_GIG_PHASE.WITHDRAWN,
356357
MY_GIG_PHASE.JOB_CLOSED,
357358
MY_GIG_PHASE.NOT_SELECTED,
358359
MY_GIG_PHASE.COMPLETED,
359-
MY_GIG_PHASE.WITHDRAWN,
360360
];
361361

362362
export const PER_PAGE = 10;
@@ -373,6 +373,8 @@ export const AVAILABLE_REMARK_BY_JOB_STATUS = [
373373
MY_GIGS_JOB_STATUS.REJECTED_OTHER,
374374
MY_GIGS_JOB_STATUS.REJECTED_PRE_SCREEN,
375375
MY_GIGS_JOB_STATUS.JOB_CLOSED,
376+
MY_GIGS_JOB_STATUS.WITHDRAWN,
377+
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
376378
];
377379
export const MY_GIG_STATUS_PLACED = "PLACED";
378380

@@ -395,6 +397,14 @@ export const MY_GIGS_STATUS_EMPTY_TEXT = {
395397
[GIGS_FILTER_STATUSES.ARCHIVED_JOBS]: "YOU DON'T HAVE ANY ARCHIVED GIGS YET.",
396398
};
397399

400+
export const MY_GIGS_STATUS_REMARK_TEXT = {
401+
[MY_GIGS_JOB_STATUS.WITHDRAWN]:
402+
"You already placed in other gigs. This will not moving forward.",
403+
[MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN]:
404+
"You already placed in other gigs. This will not moving forward.",
405+
[MY_GIGS_JOB_STATUS.COMPLETED]: "Gig has been completed.",
406+
};
407+
398408
export const CHECKING_GIG_TIMES = 3;
399409

400410
export const DELAY_CHECK_GIG_TIME = 2000;

‎src/containers/MyGigs/JobListing/JobCard/JobDetail/index.jsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from "react";
2+
import PT from "prop-types";
3+
import CompanyLogo from "../../../../../assets/images/company-logo.svg";
4+
5+
import * as utils from "../../../../../utils";
6+
import * as constants from "../../../../../constants";
7+
8+
import "./styles.scss";
9+
10+
const JobDetail = ({
11+
jobTitle,
12+
jobDescription,
13+
paymentInfo,
14+
hours,
15+
workingHours,
16+
}) => {
17+
return (
18+
<div styleName="job-detail">
19+
<div styleName="job-detail-wrapper">
20+
<div styleName="detail">
21+
<img src={CompanyLogo} alt="Company Logo" />
22+
<div styleName="detail-content">
23+
<div styleName="title">{jobTitle}</div>
24+
<p styleName="description">{jobDescription}</p>
25+
<ul styleName="job-items">
26+
<li>
27+
<div styleName="job-item">
28+
<div styleName="caption">Payment</div>
29+
<div styleName="text">{paymentInfo}</div>
30+
</div>
31+
</li>
32+
<li>
33+
<div styleName="job-item">
34+
<div styleName="caption">Hours</div>
35+
<div styleName="text">{hours}</div>
36+
</div>
37+
</li>
38+
<li>
39+
<div styleName="job-item">
40+
<div styleName="caption">Working hours</div>
41+
<div styleName="text">{workingHours}</div>
42+
</div>
43+
</li>
44+
</ul>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
);
50+
};
51+
52+
JobDetail.defaultProps = {
53+
jobTitle: "NetFlip",
54+
jobDescription:
55+
"Job Details goes here lorem ipsum dolor sit amet conseqteur adipiscing edit tempor dolor magna aliqua.Job Details goes here lorem ipsum dolor sit amet conseqteur adipiscing edit tempor dolor magna aliqua.Job Details goes here lorem ipsum dolor sit amet conseqteur adipiscing edit tempor dolor magna aliqua.Job Details goes here lorem ipsum dolor sit amet conseqteur adipiscing edit tempor dolor magna aliqua.",
56+
};
57+
58+
JobDetail.propTypes = {
59+
logo: PT.string,
60+
jobTitle: PT.string,
61+
jobDescription: PT.string,
62+
paymentInfo: PT.string,
63+
hours: PT.number,
64+
workingHours: PT.string,
65+
};
66+
67+
export default JobDetail;

‎src/containers/MyGigs/JobListing/JobCard/JobDetail/styles.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@import "styles/variables";
2+
@import "styles/mixins";
3+
4+
.job-detail {
5+
padding-bottom: 6px;
6+
}
7+
8+
.job-detail-wrapper {
9+
padding: 24px 22px 22px;
10+
background-color: $white;
11+
border: 1px solid $gray3;
12+
border-radius: $border-radius;
13+
}
14+
15+
.detail {
16+
display: flex;
17+
flex-direction: row;
18+
justify-content: space-around;
19+
align-items: flex-start;
20+
& > img {
21+
margin-right: 22px;
22+
}
23+
}
24+
.detail-content {
25+
display: flex;
26+
flex-direction: column;
27+
text-align: left;
28+
29+
.title {
30+
color: $tc-turquoise-dark2;
31+
font-size: 24px;
32+
line-height: 36px;
33+
}
34+
.description {
35+
color: $tc-black;
36+
font-size: 14px;
37+
line-height: 22px;
38+
}
39+
}
40+
.job-items {
41+
display: flex;
42+
justify-content: space-between;
43+
width: 64.38969%;
44+
margin-top: 19px;
45+
46+
@media screen and (min-width: 1400px) {
47+
max-width: calc(575px + 20%);
48+
}
49+
}
50+
51+
.job-item {
52+
margin-right: 25px;
53+
white-space: nowrap;
54+
55+
.caption {
56+
@include roboto-regular;
57+
58+
margin-bottom: 2px;
59+
font-size: $font-size-xs;
60+
color: $tc-gray-70;
61+
line-height: $line-height-xs;
62+
}
63+
64+
.text {
65+
@include roboto-medium;
66+
67+
font-size: $font-size-sm;
68+
line-height: $line-height-base;
69+
}
70+
}

‎src/containers/MyGigs/JobListing/JobCard/index.jsx‎

Lines changed: 64 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React, { useEffect, useRef, useState } from "react";
1+
import React, { useEffect, useRef, useState, useMemo } from "react";
22
import PT from "prop-types";
33
import ProgressBar from "./ProgressBar";
4+
import JobDetail from "./JobDetail";
45
import Ribbon from "../../../../components/Ribbon";
56
import Button from "../../../../components/Button";
67
import IconChevronDown from "assets/icons/button-chevron-down.svg";
@@ -11,6 +12,7 @@ import {
1112
MY_GIG_PHASE_ACTION,
1213
MY_GIGS_JOB_STATUS,
1314
PHASES_FOR_JOB_STATUS,
15+
MY_GIGS_STATUS_REMARK_TEXT,
1416
} from "../../../../constants";
1517
import { formatMoneyValue } from "../../../../utils";
1618
import IconNote from "../../../../assets/icons/note.svg";
@@ -30,12 +32,34 @@ const JobCard = ({ job }) => {
3032
setFooterHeight(footerRef.current.offsetHeight);
3133
}, [expanded]);
3234

35+
const paymentInfo = useMemo(() => {
36+
if (job.paymentRangeFrom && job.paymentRangeTo && job.currency) {
37+
return `${job.currency}
38+
${formatMoneyValue(job.paymentRangeFrom, "")}
39+
${" - "}
40+
${formatMoneyValue(job.paymentRangeTo, "")}
41+
${" (USD)"}
42+
${" / "}
43+
${job.paymentRangeRateType}`;
44+
}
45+
return "";
46+
}, [
47+
job.paymentRangeFrom,
48+
job.paymentRangeTo,
49+
job.currency,
50+
job.paymentRangeRateType,
51+
]);
52+
3353
return (
3454
<div
3555
styleName={`card job-card ${
3656
job.label === MY_GIG_PHASE_LABEL.SELECTED ? "label-selected" : ""
3757
} ${job.label === MY_GIG_PHASE_LABEL.OFFERED ? "label-offered" : ""} ${
3858
job.label === MY_GIG_PHASE_LABEL.PLACED ? "label-placed" : ""
59+
} ${
60+
job.label === MY_GIG_PHASE_LABEL.WITHDRAWN ? "label-withdrawn" : ""
61+
} ${
62+
job.label === MY_GIG_PHASE_LABEL.COMPLETED ? "label-completed" : ""
3963
} ${
4064
job.label === MY_GIG_PHASE_LABEL.NOT_SELECTED
4165
? "label-not-selected"
@@ -67,7 +91,7 @@ const JobCard = ({ job }) => {
6791
<div styleName="job-item">
6892
<div styleName="caption">Payment Range</div>
6993
<div styleName="text">
70-
{job.paymentRangeFrom &&
94+
{/* {job.paymentRangeFrom &&
7195
job.paymentRangeTo &&
7296
job.currency && (
7397
<>
@@ -79,7 +103,8 @@ const JobCard = ({ job }) => {
79103
{" / "}
80104
{job.paymentRangeRateType}
81105
</>
82-
)}
106+
)} */}
107+
{paymentInfo}
83108
</div>
84109
</div>
85110
</li>
@@ -124,18 +149,30 @@ const JobCard = ({ job }) => {
124149
</div>
125150
<div styleName="card-footer job-card-footer" ref={footerRef}>
126151
<div styleName="note-container">
127-
{job.remark && (
128-
<NoteTooltip>
129-
<i styleName="icon">
130-
<IconNote />
131-
</i>
132-
</NoteTooltip>
133-
)}
134-
<span styleName="note">{job.remark}</span>
152+
{job.remark ||
153+
([
154+
MY_GIGS_JOB_STATUS.WITHDRAWN,
155+
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
156+
MY_GIGS_JOB_STATUS.COMPLETED,
157+
] && (
158+
<NoteTooltip>
159+
<i styleName="icon">
160+
<IconNote />
161+
</i>
162+
</NoteTooltip>
163+
))}
164+
<span styleName="note">
165+
{[
166+
MY_GIGS_JOB_STATUS.WITHDRAWN,
167+
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
168+
MY_GIGS_JOB_STATUS.COMPLETED,
169+
].includes(job.status)
170+
? MY_GIGS_STATUS_REMARK_TEXT[job.status]
171+
: job.remark}
172+
</span>
135173
{![
136174
MY_GIGS_JOB_STATUS.JOB_CLOSED,
137175
MY_GIGS_JOB_STATUS.REJECTED_OTHER,
138-
MY_GIGS_JOB_STATUS.COMPLETED,
139176
MY_GIGS_JOB_STATUS.WITHDRAWN,
140177
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
141178
].includes(job.status) && (
@@ -158,20 +195,28 @@ const JobCard = ({ job }) => {
158195
{![
159196
MY_GIGS_JOB_STATUS.JOB_CLOSED,
160197
MY_GIGS_JOB_STATUS.REJECTED_OTHER,
161-
MY_GIGS_JOB_STATUS.COMPLETED,
162198
MY_GIGS_JOB_STATUS.WITHDRAWN,
163199
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
164200
].includes(job.status) && (
165201
<div
166202
styleName="progress-bar"
167203
style={{ display: expanded ? "" : "none" }}
168204
>
169-
<ProgressBar
170-
phases={PHASES_FOR_JOB_STATUS[job.status]}
171-
currentPhase={job.phase}
172-
currentPhaseStatus={job.phaseStatus}
173-
note={job.phaseNote}
174-
/>
205+
{MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
206+
<ProgressBar
207+
phases={PHASES_FOR_JOB_STATUS[job.status]}
208+
currentPhase={job.phase}
209+
currentPhaseStatus={job.phaseStatus}
210+
note={job.phaseNote}
211+
/>
212+
)}
213+
{MY_GIGS_JOB_STATUS.COMPLETED === job.status && (
214+
<JobDetail
215+
paymentInfo={paymentInfo}
216+
hours={job.hours}
217+
workingHours={job.workingHours}
218+
/>
219+
)}
175220
</div>
176221
)}
177222
</div>

‎src/containers/MyGigs/JobListing/JobCard/styles.scss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@
5353
.job-card {
5454
&.label-selected,
5555
&.label-offered,
56-
&.label-placed {
56+
&.label-placed,
57+
&.label-completed {
5758
.job-card-content {
5859
color: $white;
5960
}
@@ -89,6 +90,23 @@
8990
}
9091
}
9192

93+
&.label-withdrawn {
94+
:global(.ribbon) {
95+
color: $white;
96+
background: linear-gradient(221.5deg, #2A2A2A 0%, #555555 100%);
97+
}
98+
}
99+
100+
&.label-completed {
101+
:global(.ribbon) {
102+
color: $tc-black;
103+
background: $tc-white;
104+
}
105+
.card-image {
106+
background: url('../../../../assets/images/completed.svg') no-repeat right 24px center / auto, linear-gradient(52.91deg, #2984BD 0%, #50ADE8 100%);
107+
}
108+
}
109+
92110
&.label-not-selected {
93111
:global(.ribbon) {
94112
color: $white;

0 commit comments

Comments
 (0)