Merge branch 'gigs-new-ui' into gigs-filter

Author: LieutenantRoger

src/assets/images/completed.svg

@@ -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/constants/index.js

@@ -1,19 +1,23 @@
-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 Ribbon from "../../../../components/Ribbon";
 import Button from "../../../../components/Button";
 import IconChevronDown from "assets/icons/button-chevron-down.svg";
 import ProgressTooltip from "./tooltips/ProgressTooltip";
 import NoteTooltip from "./tooltips/NoteTooltip";
+import EarnTooltip from "./tooltips/EarnTooltip";
 import {
   MY_GIG_PHASE_LABEL,
   MY_GIG_PHASE_ACTION,
   MY_GIGS_JOB_STATUS,
   PHASES_FOR_JOB_STATUS,
+  MY_GIGS_STATUS_REMARK_TEXT,
 } from "../../../../constants";
 import { formatMoneyValue } from "../../../../utils";
+import { getDateRange } from "../../../../utils/myGig";
 import IconNote from "../../../../assets/icons/note.svg";
+import IconInfo from "../../../../assets/icons/ribbon-icon.svg";
 
 import "./styles.scss";
 
@@ -30,12 +34,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"
@@ -65,38 +91,55 @@ const JobCard = ({ job }) => {
             <ul styleName="job-items">
               <li>
                 <div styleName="job-item">
-                  <div styleName="caption">Payment Range</div>
-                  <div styleName="text">
-                    {job.paymentRangeFrom &&
-                      job.paymentRangeTo &&
-                      job.currency && (
-                        <>
-                          {job.currency}
-                          {formatMoneyValue(job.paymentRangeFrom, "")}
-                          {" - "}
-                          {formatMoneyValue(job.paymentRangeTo, "")}
-                          {" (USD)"}
-                          {" / "}
-                          {job.paymentRangeRateType}
-                        </>
-                      )}
-                  </div>
+                  {MY_GIGS_JOB_STATUS.COMPLETED === job.status && (
+                    <>
+                      <div styleName="caption">Duration</div>
+                      <div styleName="text">
+                        {getDateRange(job.rbStartDate, job.rbEndDate)}
+                      </div>
+                    </>
+                  )}
+                  {MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
+                    <>
+                      <div styleName="caption">Payment Range</div>
+                      <div styleName="text">{paymentInfo}</div>
+                    </>
+                  )}
                 </div>
               </li>
               <li>
                 <div styleName="job-item">
-                  <div styleName="caption">Location</div>
-                  <div styleName="text">{job.location}</div>
+                  {MY_GIGS_JOB_STATUS.COMPLETED === job.status && (
+                    <>
+                      <div styleName="caption">
+                        <span>Total Earnings</span>
+                        <span styleName="earn-tip">
+                          <EarnTooltip>
+                            <IconInfo />
+                          </EarnTooltip>
+                        </span>
+                      </div>
+                      <div styleName="text">{`${job.currency}${job.paymentTotal}`}</div>
+                    </>
+                  )}
+                  {MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
+                    <>
+                      <div styleName="caption">Location</div>
+                      <div styleName="text">{job.location}</div>
+                    </>
+                  )}
                 </div>
               </li>
-              <li>
-                <div styleName="job-item">
-                  <div styleName="caption">Duration</div>
-                  <div styleName="text">
-                    {job.duration && `${job.duration} Weeks`}
+              {MY_GIGS_JOB_STATUS.COMPLETED !== job.status && (
+                <li>
+                  <div styleName="job-item">
+                    <div styleName="caption">Duration</div>
+                    <div styleName="text">
+                      {job.duration && `${job.duration} Weeks`}
+                    </div>
                   </div>
-                </div>
-              </li>
+                </li>
+              )}
               <li>
                 <div styleName="job-item">
                   <div styleName="caption">Hours</div>
@@ -124,14 +167,27 @@ const JobCard = ({ job }) => {
       </div>
       <div styleName="card-footer job-card-footer" ref={footerRef}>
         <div styleName="note-container">
-          {job.remark && (
+          {(job.remark ||
+            [
+              MY_GIGS_JOB_STATUS.WITHDRAWN,
+              MY_GIGS_JOB_STATUS.WITHDRAWN_PRESCREEN,
+              MY_GIGS_JOB_STATUS.COMPLETED,
+            ].includes(job.status)) && (
             <NoteTooltip>
               <i styleName="icon">
                 <IconNote />
               </i>
             </NoteTooltip>
           )}
-          <span styleName="note">{job.remark}</span>
+          <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,

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

@@ -10,6 +10,7 @@
   border-radius: $border-radius-lg;
   box-shadow: $shadow;
   z-index:0;
+  min-width: 780px;
 }
 
 .card-header {
@@ -53,7 +54,8 @@
 .job-card {
   &.label-selected,
   &.label-offered,
-  &.label-placed {
+  &.label-placed,
+  &.label-completed {
     .job-card-content {
       color: $white;
     }
@@ -89,6 +91,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('../../../../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;
@@ -132,6 +151,19 @@
       font-size: $font-size-xs;
       color: $tc-gray-70;
       line-height: $line-height-xs;
+
+      .earn-tip {
+        position: absolute;
+        line-height: 22px;
+
+        svg {
+          transform: scale(0.71);
+
+          path {
+            fill: currentColor
+          }
+        }
+      }
     }
 
     .text {

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

@@ -0,0 +1,25 @@
+import React from "react";
+import PT from "prop-types";
+import Tooltip from "../../../../../../components/Tooltip";
+
+import "./styles.scss";
+
+const EarnTooltip = ({ children }) => {
+  const Content = () => (
+    <div styleName="earn-tooltip">
+      Amount may not reflect any pending payments
+    </div>
+  );
+
+  return (
+    <Tooltip overlay={<Content />} placement="bottom">
+      {children}
+    </Tooltip>
+  );
+};
+
+EarnTooltip.propTypes = {
+  children: PT.node,
+};
+
+export default EarnTooltip;

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

@@ -0,0 +1,8 @@
+@import "styles/variables";
+
+.earn-tooltip {
+  width: 280px;
+  padding: 7px 10px;
+  line-height: $line-height-base;
+  font-size: 12px;
+}

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

@@ -214,9 +214,7 @@ const UpdateGigProfile = ({
               />
             </div>
             <StatusTooltip statuses={statuses}>
-              <i styleName="icon">
-                <IconInfo />
-              </i>
+              <IconInfo />
             </StatusTooltip>
           </div>
         </div>

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

@@ -40,6 +40,10 @@ const mapMyGigsData = (serverResponse) => {
         return {
           label: (gigPhase || "").toUpperCase(),
           title: myGig.title,
+          rbStartDate: myGig.rbStartDate || "",
+          rbEndDate: myGig.rbEndDate || "",
+          paymentTotal: myGig.paymentTotal || 0,
+          updatedAt: myGig.updatedAt || "",
           jobExternalId: myGig.jobExternalId,
           paymentRangeFrom: myGig.payment.min,
           paymentRangeTo: myGig.payment.max,

src/services/myGigs.js

@@ -146,3 +146,29 @@ export function createBadgeElement(htmlElement, content) {
 
   return badgeElement;
 }
+
+// export function createCompanyLogo() {
+//   return (
+// <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">
+//     <title>9825381A-BF03-46A3-AD6D-206A06A2B45D</title>
+//     <g id="Screens" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+//         <g id="03_2_My-Gigs" transform="translate(-346.000000, -807.000000)" fill-rule="nonzero">
+//             <g id="Group-11" transform="translate(305.000000, 182.000000)">
+//                 <g id="Group-10-Copy-7" transform="translate(0.000000, 412.000000)">
+//                     <g id="Group-9" transform="translate(0.000000, 142.000000)">
+//                         <g id="Group-10" transform="translate(19.000000, 47.000000)">
+//                             <g id="Group-Copy-2" transform="translate(22.000000, 24.000000)">
+//                                 <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>
+//                                 <polygon id="Path_81" fill="#AA011A" points="15 0.166 15 56.666 0 63.998 0 0.166"></polygon>
+//                                 <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>
+//                                 <polygon id="Path_83" fill="#FF0021" points="28.808 0.166 43.124 0.166 21.561 47.855 21.561 16.265"></polygon>
+//                             </g>
+//                         </g>
+//                     </g>
+//                 </g>
+//             </g>
+//         </g>
+//     </g>
+// </svg>
+// )
+// }

src/utils/icon.js

@@ -106,3 +106,18 @@ export function validatePhone(phoneNumber, country) {
 
   return error ? error : null;
 }
+
+export function getDateRange(startDate, endDate) {
+  const yearStart = new Date(startDate).getFullYear();
+  const yearEnd = new Date(endDate).getFullYear();
+  if (yearStart > yearEnd) {
+    return "";
+  }
+  const options = { month: "long", day: "numeric" };
+  const first = new Date(startDate).toLocaleDateString("en-us", options);
+  const second = new Date(endDate).toLocaleDateString("en-us", options);
+  if (yearStart == yearEnd) {
+    return `${first} - ${second}, ${yearStart}`;
+  }
+  return `${first}, ${yearStart} - ${second}, ${yearEnd}`;
+}