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

Commit 2389450

Browse files
LieutenantRogerLieutenantRoger
committed
Merge branch 'gigs-new-ui' into gigs-filter
2 parents e995a6f + 4c918a1 commit 2389450

File tree

10 files changed

+218
-33
lines changed

10 files changed

+218
-33
lines changed

‎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/index.jsx‎

Lines changed: 84 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
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";
44
import Ribbon from "../../../../components/Ribbon";
55
import Button from "../../../../components/Button";
66
import IconChevronDown from "assets/icons/button-chevron-down.svg";
77
import ProgressTooltip from "./tooltips/ProgressTooltip";
88
import NoteTooltip from "./tooltips/NoteTooltip";
9+
import EarnTooltip from "./tooltips/EarnTooltip";
910
import {
1011
MY_GIG_PHASE_LABEL,
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";
18+
import { getDateRange } from "../../../../utils/myGig";
1619
import IconNote from "../../../../assets/icons/note.svg";
20+
import IconInfo from "../../../../assets/icons/ribbon-icon.svg";
1721

1822
import "./styles.scss";
1923

@@ -30,12 +34,34 @@ const JobCard = ({ job }) => {
3034
setFooterHeight(footerRef.current.offsetHeight);
3135
}, [expanded]);
3236

37+
const paymentInfo = useMemo(() => {
38+
if (job.paymentRangeFrom && job.paymentRangeTo && job.currency) {
39+
return `${job.currency}
40+
${formatMoneyValue(job.paymentRangeFrom, "")}
41+
${" - "}
42+
${formatMoneyValue(job.paymentRangeTo, "")}
43+
${" (USD)"}
44+
${" / "}
45+
${job.paymentRangeRateType}`;
46+
}
47+
return "";
48+
}, [
49+
job.paymentRangeFrom,
50+
job.paymentRangeTo,
51+
job.currency,
52+
job.paymentRangeRateType,
53+
]);
54+
3355
return (
3456
<div
3557
styleName={`card job-card ${
3658
job.label === MY_GIG_PHASE_LABEL.SELECTED ? "label-selected" : ""
3759
} ${job.label === MY_GIG_PHASE_LABEL.OFFERED ? "label-offered" : ""} ${
3860
job.label === MY_GIG_PHASE_LABEL.PLACED ? "label-placed" : ""
61+
} ${
62+
job.label === MY_GIG_PHASE_LABEL.WITHDRAWN ? "label-withdrawn" : ""
63+
} ${
64+
job.label === MY_GIG_PHASE_LABEL.COMPLETED ? "label-completed" : ""
3965
} ${
4066
job.label === MY_GIG_PHASE_LABEL.NOT_SELECTED
4167
? "label-not-selected"
@@ -65,38 +91,55 @@ const JobCard = ({ job }) => {
6591
<ul styleName="job-items">
6692
<li>
6793
<div styleName="job-item">
68-
<div styleName="caption">Payment Range</div>
69-
<div styleName="text">
70-
{job.paymentRangeFrom &&
71-
job.paymentRangeTo &&
72-
job.currency && (
73-
<>
74-
{job.currency}
75-
{formatMoneyValue(job.paymentRangeFrom, "")}
76-
{" - "}
77-
{formatMoneyValue(job.paymentRangeTo, "")}
78-
{" (USD)"}
79-
{" / "}
80-
{job.paymentRangeRateType}
81-
</>
82-
)}
83-
</div>
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+
)}
84108
</div>
85109
</li>
86110
<li>
87111
<div styleName="job-item">
88-
<div styleName="caption">Location</div>
89-
<div styleName="text">{job.location}</div>
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+
)}
90131
</div>
91132
</li>
92-
<li>
93-
<div styleName="job-item">
94-
<div styleName="caption">Duration</div>
95-
<div styleName="text">
96-
{job.duration && `${job.duration} Weeks`}
133+
{MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
134+
<li>
135+
<div styleName="job-item">
136+
<div styleName="caption">Duration</div>
137+
<div styleName="text">
138+
{job.duration && `${job.duration} Weeks`}
139+
</div>
97140
</div>
98-
</div>
99-
</li>
141+
</li>
142+
)}
100143
<li>
101144
<div styleName="job-item">
102145
<div styleName="caption">Hours</div>
@@ -124,14 +167,27 @@ const JobCard = ({ job }) => {
124167
</div>
125168
<div styleName="card-footer job-card-footer" ref={footerRef}>
126169
<div styleName="note-container">
127-
{job.remark && (
170+
{(job.remark ||
171+
[
172+
MY_GIGS_JOB_STATUS.WITHDRAWN,
173+
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
174+
MY_GIGS_JOB_STATUS.COMPLETED,
175+
].includes(job.status)) && (
128176
<NoteTooltip>
129177
<i styleName="icon">
130178
<IconNote />
131179
</i>
132180
</NoteTooltip>
133181
)}
134-
<span styleName="note">{job.remark}</span>
182+
<span styleName="note">
183+
{[
184+
MY_GIGS_JOB_STATUS.WITHDRAWN,
185+
MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
186+
MY_GIGS_JOB_STATUS.COMPLETED,
187+
].includes(job.status)
188+
? MY_GIGS_STATUS_REMARK_TEXT[job.status]
189+
: job.remark}
190+
</span>
135191
{![
136192
MY_GIGS_JOB_STATUS.JOB_CLOSED,
137193
MY_GIGS_JOB_STATUS.REJECTED_OTHER,

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

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
border-radius: $border-radius-lg;
1111
box-shadow: $shadow;
1212
z-index:0;
13+
min-width: 780px;
1314
}
1415

1516
.card-header {
@@ -53,7 +54,8 @@
5354
.job-card {
5455
&.label-selected,
5556
&.label-offered,
56-
&.label-placed {
57+
&.label-placed,
58+
&.label-completed {
5759
.job-card-content {
5860
color: $white;
5961
}
@@ -89,6 +91,23 @@
8991
}
9092
}
9193

94+
&.label-withdrawn {
95+
:global(.ribbon) {
96+
color: $white;
97+
background: linear-gradient(221.5deg, #2A2A2A 0%, #555555 100%);
98+
}
99+
}
100+
101+
&.label-completed {
102+
:global(.ribbon) {
103+
color: $tc-black;
104+
background: $tc-white;
105+
}
106+
.card-image {
107+
background: url('../../../../assets/images/completed.svg') no-repeat right 24px center / auto, linear-gradient(52.91deg, #2984BD 0%, #50ADE8 100%);
108+
}
109+
}
110+
92111
&.label-not-selected {
93112
:global(.ribbon) {
94113
color: $white;
@@ -132,6 +151,19 @@
132151
font-size: $font-size-xs;
133152
color: $tc-gray-70;
134153
line-height: $line-height-xs;
154+
155+
.earn-tip {
156+
position: absolute;
157+
line-height: 22px;
158+
159+
svg {
160+
transform: scale(0.71);
161+
162+
path {
163+
fill: currentColor
164+
}
165+
}
166+
}
135167
}
136168

137169
.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;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import "styles/variables";
2+
3+
.earn-tooltip {
4+
width: 280px;
5+
padding: 7px 10px;
6+
line-height: $line-height-base;
7+
font-size: 12px;
8+
}

‎src/containers/MyGigs/modals/UpdateGigProfile/index.jsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -214,9 +214,7 @@ const UpdateGigProfile = ({
214214
/>
215215
</div>
216216
<StatusTooltip statuses={statuses}>
217-
<i styleName="icon">
218-
<IconInfo />
219-
</i>
217+
<IconInfo />
220218
</StatusTooltip>
221219
</div>
222220
</div>

‎src/services/myGigs.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,10 @@ const mapMyGigsData = (serverResponse) => {
4040
return {
4141
label: (gigPhase || "").toUpperCase(),
4242
title: myGig.title,
43+
rbStartDate: myGig.rbStartDate || "",
44+
rbEndDate: myGig.rbEndDate || "",
45+
paymentTotal: myGig.paymentTotal || 0,
46+
updatedAt: myGig.updatedAt || "",
4347
jobExternalId: myGig.jobExternalId,
4448
paymentRangeFrom: myGig.payment.min,
4549
paymentRangeTo: myGig.payment.max,

‎src/utils/icon.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,3 +146,29 @@ export function createBadgeElement(htmlElement, content) {
146146

147147
return badgeElement;
148148
}
149+
150+
// export function createCompanyLogo() {
151+
// return (
152+
// <svg width="44px" height="64px" viewBox="0 0 44 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
153+
// <title>9825381A-BF03-46A3-AD6D-206A06A2B45D</title>
154+
// <g id="Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
155+
// <g id="03_2_My-Gigs" transform="translate(-346.000000, -807.000000)" fill-rule="nonzero">
156+
// <g id="Group-11" transform="translate(305.000000, 182.000000)">
157+
// <g id="Group-10-Copy-7" transform="translate(0.000000, 412.000000)">
158+
// <g id="Group-9" transform="translate(0.000000, 142.000000)">
159+
// <g id="Group-10" transform="translate(19.000000, 47.000000)">
160+
// <g id="Group-Copy-2" transform="translate(22.000000, 24.000000)">
161+
// <path d="M43.125,0 L43.125,64 L40.946,63.81 C37.299,63.21 33.573,62.777 29.87,62.521 L28.125,62.4 L28.125,7.5 L43.125,0 Z" id="Path_80" fill="#D5011D"></path>
162+
// <polygon id="Path_81" fill="#AA011A" points="15 0.166 15 56.666 0 63.998 0 0.166"></polygon>
163+
// <path d="M21.563,16.264 L25.313,16.264 L21.563,47.854 L14.982,62.408 L13.875,62.479 C9.965,62.729 6.029,63.179 2.175,63.81 L-0.004,64 L21.563,16.264 Z" id="Path_82" fill="#D5011D"></path>
164+
// <polygon id="Path_83" fill="#FF0021" points="28.808 0.166 43.124 0.166 21.561 47.855 21.561 16.265"></polygon>
165+
// </g>
166+
// </g>
167+
// </g>
168+
// </g>
169+
// </g>
170+
// </g>
171+
// </g>
172+
// </svg>
173+
// )
174+
// }

‎src/utils/myGig.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,3 +106,18 @@ export function validatePhone(phoneNumber, country) {
106106

107107
return error ? error : null;
108108
}
109+
110+
export function getDateRange(startDate, endDate) {
111+
const yearStart = new Date(startDate).getFullYear();
112+
const yearEnd = new Date(endDate).getFullYear();
113+
if (yearStart > yearEnd) {
114+
return "";
115+
}
116+
const options = { month: "long", day: "numeric" };
117+
const first = new Date(startDate).toLocaleDateString("en-us", options);
118+
const second = new Date(endDate).toLocaleDateString("en-us", options);
119+
if (yearStart == yearEnd) {
120+
return `${first} - ${second}, ${yearStart}`;
121+
}
122+
return `${first}, ${yearStart} - ${second}, ${yearEnd}`;
123+
}

0 commit comments

Comments
 (0)