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

Commit a5fcd04

Browse files
LieutenantRogerLieutenantRoger
committed
UI Update
1 parent e013a47 commit a5fcd04

File tree

10 files changed

+136
-221
lines changed

10 files changed

+136
-221
lines changed

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

Lines changed: 0 additions & 22 deletions
This file was deleted.

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

Lines changed: 0 additions & 67 deletions
This file was deleted.

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

Lines changed: 0 additions & 71 deletions
This file was deleted.

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

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { useEffect, useRef, useState, useMemo } from "react";
22
import PT from "prop-types";
33
import ProgressBar from "./ProgressBar";
4-
import JobDetail from "./JobDetail";
54
import Ribbon from "../../../../components/Ribbon";
65
import Button from "../../../../components/Button";
76
import IconChevronDown from "assets/icons/button-chevron-down.svg";
87
import ProgressTooltip from "./tooltips/ProgressTooltip";
98
import NoteTooltip from "./tooltips/NoteTooltip";
9+
import EarnTooltip from "./tooltips/EarnTooltip";
1010
import {
1111
MY_GIG_PHASE_LABEL,
1212
MY_GIG_PHASE_ACTION,
@@ -15,7 +15,9 @@ import {
1515
MY_GIGS_STATUS_REMARK_TEXT,
1616
} from "../../../../constants";
1717
import { formatMoneyValue } from "../../../../utils";
18+
import { getDateRange } from "../../../../utils/myGig";
1819
import IconNote from "../../../../assets/icons/note.svg";
20+
import IconInfo from "../../../../assets/icons/ribbon-icon.svg";
1921

2022
import "./styles.scss";
2123

@@ -86,8 +88,49 @@ const JobCard = ({ job }) => {
8688
{job.title}
8789
</a>
8890
</h4>
89-
{job.status == MY_GIGS_JOB_STATUS.COMPLETED && (
90-
<ul styleName="job-items">
91+
<ul styleName="job-items">
92+
<li>
93+
<div styleName="job-item">
94+
{MY_GIGS_JOB_STATUS.COMPLETED === job.status && (
95+
<>
96+
<div styleName="caption">Duration</div>
97+
<div styleName="text">
98+
{getDateRange(job.rbStartDate, job.rbEndDate)}
99+
</div>
100+
</>
101+
)}
102+
{MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
103+
<>
104+
<div styleName="caption">Payment Range</div>
105+
<div styleName="text">{paymentInfo}</div>
106+
</>
107+
)}
108+
</div>
109+
</li>
110+
<li>
111+
<div styleName="job-item">
112+
{MY_GIGS_JOB_STATUS.COMPLETED === job.status && (
113+
<>
114+
<div styleName="caption">
115+
<span>Total Earnings</span>
116+
<span styleName="earn-tip">
117+
<EarnTooltip>
118+
<IconInfo />
119+
</EarnTooltip>
120+
</span>
121+
</div>
122+
<div styleName="text">{`${job.currency}${job.paymentTotal}`}</div>
123+
</>
124+
)}
125+
{MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
126+
<>
127+
<div styleName="caption">Location</div>
128+
<div styleName="text">{job.location}</div>
129+
</>
130+
)}
131+
</div>
132+
</li>
133+
{MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
91134
<li>
92135
<div styleName="job-item">
93136
<div styleName="caption">Duration</div>
@@ -96,48 +139,24 @@ const JobCard = ({ job }) => {
96139
</div>
97140
</div>
98141
</li>
99-
</ul>
100-
)}
101-
{job.status !== MY_GIGS_JOB_STATUS.COMPLETED && (
102-
<ul styleName="job-items">
103-
<li>
104-
<div styleName="job-item">
105-
<div styleName="caption">Payment Range</div>
106-
<div styleName="text">{paymentInfo}</div>
107-
</div>
108-
</li>
109-
<li>
110-
<div styleName="job-item">
111-
<div styleName="caption">Location</div>
112-
<div styleName="text">{job.location}</div>
113-
</div>
114-
</li>
115-
<li>
116-
<div styleName="job-item">
117-
<div styleName="caption">Duration</div>
118-
<div styleName="text">
119-
{job.duration && `${job.duration} Weeks`}
120-
</div>
142+
)}
143+
<li>
144+
<div styleName="job-item">
145+
<div styleName="caption">Hours</div>
146+
<div styleName="text">
147+
{job.hours && `${job.hours} hours / week`}
121148
</div>
122-
</li>
123-
<li>
124-
<div styleName="job-item">
125-
<div styleName="caption">Hours</div>
126-
<div styleName="text">
127-
{job.hours && `${job.hours} hours / week`}
128-
</div>
149+
</div>
150+
</li>
151+
<li>
152+
<div styleName="job-item">
153+
<div styleName="caption">Working Hours</div>
154+
<div styleName="text">
155+
{job.workingHours && `${job.workingHours} hours`}
129156
</div>
130-
</li>
131-
<li>
132-
<div styleName="job-item">
133-
<div styleName="caption">Working Hours</div>
134-
<div styleName="text">
135-
{job.workingHours && `${job.workingHours} hours`}
136-
</div>
137-
</div>
138-
</li>
139-
</ul>
140-
)}
157+
</div>
158+
</li>
159+
</ul>
141160
</div>
142161
<div
143162
styleName={`right-side stand-by ${!job.phaseAction ? "none" : ""}`}
@@ -172,6 +191,7 @@ const JobCard = ({ job }) => {
172191
{![
173192
MY_GIGS_JOB_STATUS.JOB_CLOSED,
174193
MY_GIGS_JOB_STATUS.REJECTED_OTHER,
194+
MY_GIGS_JOB_STATUS.COMPLETED,
175195
MY_GIGS_JOB_STATUS.WITHDRAWN,
176196
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
177197
].includes(job.status) && (
@@ -194,28 +214,20 @@ const JobCard = ({ job }) => {
194214
{![
195215
MY_GIGS_JOB_STATUS.JOB_CLOSED,
196216
MY_GIGS_JOB_STATUS.REJECTED_OTHER,
217+
MY_GIGS_JOB_STATUS.COMPLETED,
197218
MY_GIGS_JOB_STATUS.WITHDRAWN,
198219
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
199220
].includes(job.status) && (
200221
<div
201222
styleName="progress-bar"
202223
style={{ display: expanded ? "" : "none" }}
203224
>
204-
{MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
205-
<ProgressBar
206-
phases={PHASES_FOR_JOB_STATUS[job.status]}
207-
currentPhase={job.phase}
208-
currentPhaseStatus={job.phaseStatus}
209-
note={job.phaseNote}
210-
/>
211-
)}
212-
{MY_GIGS_JOB_STATUS.COMPLETED === job.status && (
213-
<JobDetail
214-
paymentInfo={paymentInfo}
215-
hours={job.hours}
216-
workingHours={job.workingHours}
217-
/>
218-
)}
225+
<ProgressBar
226+
phases={PHASES_FOR_JOB_STATUS[job.status]}
227+
currentPhase={job.phase}
228+
currentPhaseStatus={job.phaseStatus}
229+
note={job.phaseNote}
230+
/>
219231
</div>
220232
)}
221233
</div>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,19 @@
151151
font-size: $font-size-xs;
152152
color: $tc-gray-70;
153153
line-height: $line-height-xs;
154+
155+
.earn-tip {
156+
position: absolute;
157+
line-height: 24px;
158+
159+
svg {
160+
transform: scale(0.71);
161+
162+
path {
163+
fill: currentColor
164+
}
165+
}
166+
}
154167
}
155168

156169
.text {

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from "react";
2+
import PT from "prop-types";
3+
import Tooltip from "../../../../../../components/Tooltip";
4+
5+
import "./styles.scss";
6+
7+
const EarnTooltip = ({ children }) => {
8+
const Content = () => (
9+
<div styleName="earn-tooltip">
10+
Amount may not reflect any pending payments
11+
</div>
12+
);
13+
14+
return (
15+
<Tooltip overlay={<Content />} placement="bottom">
16+
{children}
17+
</Tooltip>
18+
);
19+
};
20+
21+
EarnTooltip.propTypes = {
22+
children: PT.node,
23+
};
24+
25+
export default EarnTooltip;

0 commit comments

Comments
 (0)