UI Update finish

src/constants/index.js

@@ -353,10 +353,10 @@ export const SORT_STATUS_ORDER = [
   MY_GIG_PHASE.PHONE_SCREEN,
   MY_GIG_PHASE.SKILLS_TEST,
   MY_GIG_PHASE.APPLIED,
+  MY_GIG_PHASE.WITHDRAWN,
   MY_GIG_PHASE.JOB_CLOSED,
   MY_GIG_PHASE.NOT_SELECTED,
   MY_GIG_PHASE.COMPLETED,
-  MY_GIG_PHASE.WITHDRAWN,
 ];
 
 export const PER_PAGE = 10;
@@ -373,6 +373,8 @@ export const AVAILABLE_REMARK_BY_JOB_STATUS = [
   MY_GIGS_JOB_STATUS.REJECTED_OTHER,
   MY_GIGS_JOB_STATUS.REJECTED_PRE_SCREEN,
   MY_GIGS_JOB_STATUS.JOB_CLOSED,
+  MY_GIGS_JOB_STATUS.WITHDRAWN,
+  MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
 ];
 export const MY_GIG_STATUS_PLACED = "PLACED";
 
@@ -395,6 +397,14 @@ export const MY_GIGS_STATUS_EMPTY_TEXT = {
   [GIGS_FILTER_STATUSES.ARCHIVED_JOBS]: "YOU DON'T HAVE ANY ARCHIVED GIGS YET.",
 };
 
+export const MY_GIGS_STATUS_REMARK_TEXT = {
+  [MY_GIGS_JOB_STATUS.WITHDRAWN]:
+    "You already placed in other gigs. This will not moving forward.",
+  [MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN]:
+    "You already placed in other gigs. This will not moving forward.",
+  [MY_GIGS_JOB_STATUS.COMPLETED]: "Gig has been completed.",
+};
+
 export const CHECKING_GIG_TIMES = 3;
 
 export const DELAY_CHECK_GIG_TIME = 2000;

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

@@ -0,0 +1,67 @@
+import React from "react";
+import PT from "prop-types";
+import CompanyLogo from "../../../../../assets/images/company-logo.svg";
+
+import * as utils from "../../../../../utils";
+import * as constants from "../../../../../constants";
+
+import "./styles.scss";
+
+const JobDetail = ({
+  jobTitle,
+  jobDescription,
+  paymentInfo,
+  hours,
+  workingHours,
+}) => {
+  return (
+    <div styleName="job-detail">
+      <div styleName="job-detail-wrapper">
+        <div styleName="detail">
+          <img src={CompanyLogo} alt="Company Logo" />
+          <div styleName="detail-content">
+            <div styleName="title">{jobTitle}</div>
+            <p styleName="description">{jobDescription}</p>
+            <ul styleName="job-items">
+              <li>
+                <div styleName="job-item">
+                  <div styleName="caption">Payment</div>
+                  <div styleName="text">{paymentInfo}</div>
+                </div>
+              </li>
+              <li>
+                <div styleName="job-item">
+                  <div styleName="caption">Hours</div>
+                  <div styleName="text">{hours}</div>
+                </div>
+              </li>
+              <li>
+                <div styleName="job-item">
+                  <div styleName="caption">Working hours</div>
+                  <div styleName="text">{workingHours}</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+JobDetail.defaultProps = {
+  jobTitle: "NetFlip",
+  jobDescription:
+    "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.",
+};
+
+JobDetail.propTypes = {
+  logo: PT.string,
+  jobTitle: PT.string,
+  jobDescription: PT.string,
+  paymentInfo: PT.string,
+  hours: PT.number,
+  workingHours: PT.string,
+};
+
+export default JobDetail;

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

@@ -0,0 +1,70 @@
+@import "styles/variables";
+@import "styles/mixins";
+
+.job-detail {
+  padding-bottom: 6px;
+}
+
+.job-detail-wrapper {
+  padding: 24px 22px 22px;
+  background-color: $white;
+  border: 1px solid $gray3;
+  border-radius: $border-radius;
+}
+
+.detail {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-start;
+  & > img {
+    margin-right: 22px;
+  }
+}
+.detail-content {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+
+  .title {
+    color: $tc-turquoise-dark2;
+    font-size: 24px;
+    line-height: 36px;
+  }
+  .description {
+    color: $tc-black;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+.job-items {
+  display: flex;
+  justify-content: space-between;
+  width: 64.38969%;
+  margin-top: 19px;
+
+  @media screen and (min-width: 1400px) {
+    max-width: calc(575px + 20%);
+  }
+}
+
+.job-item {
+  margin-right: 25px;
+  white-space: nowrap;
+
+  .caption {
+    @include roboto-regular;
+
+    margin-bottom: 2px;
+    font-size: $font-size-xs;
+    color: $tc-gray-70;
+    line-height: $line-height-xs;
+  }
+
+  .text {
+    @include roboto-medium;
+
+    font-size: $font-size-sm;
+    line-height: $line-height-base;
+  }
+}

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

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState, useMemo } from "react";
 import PT from "prop-types";
 import ProgressBar from "./ProgressBar";
+import JobDetail from "./JobDetail";
 import Ribbon from "../../../../components/Ribbon";
 import Button from "../../../../components/Button";
 import IconChevronDown from "assets/icons/button-chevron-down.svg";
@@ -11,6 +12,7 @@ import {
   MY_GIG_PHASE_ACTION,
   MY_GIGS_JOB_STATUS,
   PHASES_FOR_JOB_STATUS,
+  MY_GIGS_STATUS_REMARK_TEXT,
 } from "../../../../constants";
 import { formatMoneyValue } from "../../../../utils";
 import IconNote from "../../../../assets/icons/note.svg";
@@ -30,12 +32,34 @@ const JobCard = ({ job }) => {
     setFooterHeight(footerRef.current.offsetHeight);
   }, [expanded]);
 
+  const paymentInfo = useMemo(() => {
+    if (job.paymentRangeFrom && job.paymentRangeTo && job.currency) {
+      return `${job.currency}
+        ${formatMoneyValue(job.paymentRangeFrom, "")}
+        ${" - "}
+        ${formatMoneyValue(job.paymentRangeTo, "")}
+        ${" (USD)"}
+        ${" / "}
+        ${job.paymentRangeRateType}`;
+    }
+    return "";
+  }, [
+    job.paymentRangeFrom,
+    job.paymentRangeTo,
+    job.currency,
+    job.paymentRangeRateType,
+  ]);
+
   return (
     <div
       styleName={`card job-card ${
         job.label === MY_GIG_PHASE_LABEL.SELECTED ? "label-selected" : ""
       } ${job.label === MY_GIG_PHASE_LABEL.OFFERED ? "label-offered" : ""} ${
         job.label === MY_GIG_PHASE_LABEL.PLACED ? "label-placed" : ""
+      } ${
+        job.label === MY_GIG_PHASE_LABEL.WITHDRAWN ? "label-withdrawn" : ""
+      } ${
+        job.label === MY_GIG_PHASE_LABEL.COMPLETED ? "label-completed" : ""
       } ${
         job.label === MY_GIG_PHASE_LABEL.NOT_SELECTED
           ? "label-not-selected"
@@ -67,7 +91,7 @@ const JobCard = ({ job }) => {
                 <div styleName="job-item">
                   <div styleName="caption">Payment Range</div>
                   <div styleName="text">
-                    {job.paymentRangeFrom &&
+                    {/* {job.paymentRangeFrom &&
                       job.paymentRangeTo &&
                       job.currency && (
                         <>
@@ -79,7 +103,8 @@ const JobCard = ({ job }) => {
                           {" / "}
                           {job.paymentRangeRateType}
                         </>
-                      )}
+                      )} */}
+                    {paymentInfo}
                   </div>
                 </div>
               </li>
@@ -124,18 +149,30 @@ const JobCard = ({ job }) => {
       </div>
       <div styleName="card-footer job-card-footer" ref={footerRef}>
         <div styleName="note-container">
-          {job.remark && (
-            <NoteTooltip>
-              <i styleName="icon">
-                <IconNote />
-              </i>
-            </NoteTooltip>
-          )}
-          <span styleName="note">{job.remark}</span>
+          {job.remark ||
+            ([
+              MY_GIGS_JOB_STATUS.WITHDRAWN,
+              MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
+              MY_GIGS_JOB_STATUS.COMPLETED,
+            ] && (
+              <NoteTooltip>
+                <i styleName="icon">
+                  <IconNote />
+                </i>
+              </NoteTooltip>
+            ))}
+          <span styleName="note">
+            {[
+              MY_GIGS_JOB_STATUS.WITHDRAWN,
+              MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
+              MY_GIGS_JOB_STATUS.COMPLETED,
+            ].includes(job.status)
+              ? MY_GIGS_STATUS_REMARK_TEXT[job.status]
+              : job.remark}
+          </span>
           {![
             MY_GIGS_JOB_STATUS.JOB_CLOSED,
             MY_GIGS_JOB_STATUS.REJECTED_OTHER,
-            MY_GIGS_JOB_STATUS.COMPLETED,
             MY_GIGS_JOB_STATUS.WITHDRAWN,
             MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
           ].includes(job.status) && (
@@ -158,20 +195,28 @@ const JobCard = ({ job }) => {
         {![
           MY_GIGS_JOB_STATUS.JOB_CLOSED,
           MY_GIGS_JOB_STATUS.REJECTED_OTHER,
-          MY_GIGS_JOB_STATUS.COMPLETED,
           MY_GIGS_JOB_STATUS.WITHDRAWN,
           MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
         ].includes(job.status) && (
           <div
             styleName="progress-bar"
             style={{ display: expanded ? "" : "none" }}
           >
-            <ProgressBar
-              phases={PHASES_FOR_JOB_STATUS[job.status]}
-              currentPhase={job.phase}
-              currentPhaseStatus={job.phaseStatus}
-              note={job.phaseNote}
-            />
+            {MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
+              <ProgressBar
+                phases={PHASES_FOR_JOB_STATUS[job.status]}
+                currentPhase={job.phase}
+                currentPhaseStatus={job.phaseStatus}
+                note={job.phaseNote}
+              />
+            )}
+            {MY_GIGS_JOB_STATUS.COMPLETED === job.status && (
+              <JobDetail
+                paymentInfo={paymentInfo}
+                hours={job.hours}
+                workingHours={job.workingHours}
+              />
+            )}
           </div>
         )}
       </div>

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

@@ -53,7 +53,8 @@
 .job-card {
   &.label-selected,
   &.label-offered,
-  &.label-placed {
+  &.label-placed,
+  &.label-completed {
     .job-card-content {
       color: $white;
     }
@@ -89,6 +90,23 @@
     }
   }
 
+  &.label-withdrawn {
+    :global(.ribbon) {
+      color: $white;
+      background: linear-gradient(221.5deg, #2A2A2A 0%, #555555 100%);
+    }
+  }
+
+  &.label-completed {
+    :global(.ribbon) {
+      color: $tc-black;
+      background: $tc-white;
+    }
+    .card-image {
+      background: url(https://github.com/'../../../../assets/images/completed.svg') no-repeat right 24px center / auto, linear-gradient(52.91deg, #2984BD 0%, #50ADE8 100%);
+    }
+  }
+
   &.label-not-selected {
     :global(.ribbon) {
       color: $white;