Added more info into period's payments' popover.

Author: MadOPcode

src/constants/workPeriods.js

@@ -90,6 +90,14 @@ export const API_PAYMENT_STATUS_MAP = (function () {
   return obj;
 })();
 
+export const API_CHALLENGE_PAYMENT_STATUS_MAP = {
+  cancelled: PAYMENT_STATUS.CANCELLED,
+  completed: PAYMENT_STATUS.COMPLETED,
+  failed: PAYMENT_STATUS.FAILED,
+  "in-progress": PAYMENT_STATUS.IN_PROGRESS,
+  scheduled: PAYMENT_STATUS.SCHEDULED,
+};
+
 export const JOB_NAME_LOADING = "Loading...";
 export const JOB_NAME_NONE = "<Job is not assigned>";
 export const JOB_NAME_ERROR = "<Error loading job>";

src/constants/workPeriods/paymentStatus.js

@@ -3,3 +3,7 @@ export const COMPLETED = "COMPLETED";
 export const PENDING = "PENDING";
 export const IN_PROGRESS = "IN_PROGRESS";
 export const NO_DAYS = "NO_DAYS";
+export const SCHEDULED = "SCHEDULED";
+export const FAILED = "FAILED";
+export const CANCELLED = "CANCELLED";
+export const UNDEFINED = "UNDEFINED";

src/routes/WorkPeriods/components/PaymentStatus/styles.module.scss

@@ -22,10 +22,12 @@
   background: #efd047;
 }
 
-.in_progress {
+.in_progress,
+.scheduled {
   background: #9d41c9;
 }
 
+.cancelled,
 .no_days {
   background: #aaa;
 }
@@ -34,6 +36,10 @@
   background: #ef476f;
 }
 
+.failed {
+  background: #e90c5a;
+}
+
 .undefined {
   padding: 0;
   @include roboto-regular;

src/routes/WorkPeriods/components/PaymentsListItem/index.jsx

@@ -2,11 +2,11 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useCallback, useRef } from "react";
 import PT from "prop-types";
-import cn from "classnames";
 import styles from "./styles.module.scss";
-import { formatChallengeUrl } from "utils/formatters";
+import { currencyFormatter, formatChallengeUrl } from "utils/formatters";
+import PaymentStatus from "../PaymentStatus";
 
-const PaymentsListItem = ({ className, item }) => {
+const PaymentsListItem = ({ item }) => {
   const inputRef = useRef();
 
   const onCopyLinkClick = useCallback(() => {
@@ -16,32 +16,50 @@ const PaymentsListItem = ({ className, item }) => {
   }, []);
 
   return (
-    <div className={cn(styles.container, className)}>
-      <span className={styles.iconLink}></span>
-      <input
-        readOnly
-        ref={inputRef}
-        type="text"
-        value={item.challengeId || "0"}
-      />
-      <span className={styles.iconCopyLink} onClick={onCopyLinkClick}></span>
-      <a
-        className={styles.iconOpenLink}
-        href={formatChallengeUrl(item.challengeId)}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <span className={styles.hidden}>{item.id}</span>
-      </a>
-    </div>
+    <tr>
+      <td>
+        <div className={styles.challengeId}>
+          <span className={styles.iconLink}></span>
+          <input
+            readOnly
+            ref={inputRef}
+            type="text"
+            value={item.challengeId || "0"}
+          />
+          <span
+            className={styles.iconCopyLink}
+            onClick={onCopyLinkClick}
+          ></span>
+          <a
+            className={styles.iconOpenLink}
+            href={formatChallengeUrl(item.challengeId)}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <span className={styles.hidden}>{item.id}</span>
+          </a>
+        </div>
+      </td>
+      <td className={styles.weeklyRate}>
+        {currencyFormatter.format(item.memberRate)}
+      </td>
+      <td className={styles.days}>{item.days}</td>
+      <td className={styles.amount}>{currencyFormatter.format(item.amount)}</td>
+      <td>
+        <PaymentStatus status={item.status} />
+      </td>
+    </tr>
   );
 };
 
 PaymentsListItem.propTypes = {
-  className: PT.string,
   item: PT.shape({
-    id: PT.oneOfType([PT.string, PT.number]),
+    id: PT.oneOfType([PT.string, PT.number]).isRequired,
+    amount: PT.number.isRequired,
     challengeId: PT.oneOfType([PT.string, PT.number]),
+    days: PT.number.isRequired,
+    memberRate: PT.number.isRequired,
+    status: PT.string.isRequired,
   }),
 };
 

src/routes/WorkPeriods/components/PaymentsListItem/styles.module.scss

@@ -1,27 +1,31 @@
 @import "styles/mixins";
 
-.container {
-  display: flex;
-  align-items: center;
+.challengeId {
+  display: inline-block;
 
   input {
-    display: block;
+    display: inline-block;
     margin: 0;
-    border: none;
+    border: none !important;
     padding: 0;
-    max-width: 70px;
+    width: 70px;
     height: 22px;
     background: #fff;
     @include roboto-medium;
     line-height: 22px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     outline: none !important;
+    box-shadow: none !important;
+    pointer-events: none;
     color: #0d61bf;
   }
 }
 
 .iconLink {
-  flex: 0 0 auto;
   display: inline-block;
+  vertical-align: -2px;
   margin-right: 5px;
   width: 16px;
   height: 16px;
@@ -32,8 +36,8 @@
 }
 
 .iconCopyLink {
-  flex: 0 0 auto;
   display: inline-block;
+  vertical-align: -2px;
   margin-left: 18px;
   width: 16px;
   height: 16px;
@@ -45,8 +49,8 @@
 }
 
 .iconOpenLink {
-  flex: 0 0 auto;
   display: inline-block;
+  vertical-align: -2px;
   margin-left: 16px;
   width: 16px;
   height: 16px;
@@ -57,6 +61,12 @@
   background-image: url("./../../../../assets/images/icon-open-outside.png");
 }
 
+.weeklyRate,
+.days,
+.amount {
+  text-align: right;
+}
+
 .hidden {
   display: none;
 }

src/routes/WorkPeriods/components/PaymentsPopup/index.jsx

@@ -13,12 +13,23 @@ import PaymentsListItem from "../PaymentsListItem";
 const PaymentsPopup = ({ className, payments }) => {
   return (
     <form className={cn(styles.container, className)} action="#">
-      <div className={styles.title}>Challenges for Payments</div>
-      <div className={styles.paymentsList}>
-        {payments.map((payment) => (
-          <PaymentsListItem key={payment.id} item={payment} />
-        ))}
-      </div>
+      {/* <div className={styles.title}>Challenges for Payments</div> */}
+      <table className={styles.paymentsList}>
+        <thead>
+          <tr>
+            <th>Challenge ID</th>
+            <th>Weekly Rate</th>
+            <th>Days</th>
+            <th>Amount</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {payments.map((payment) => (
+            <PaymentsListItem key={payment.id} item={payment} />
+          ))}
+        </tbody>
+      </table>
     </form>
   );
 };

src/routes/WorkPeriods/components/PaymentsPopup/styles.module.scss

@@ -3,7 +3,7 @@
 .container {
   position: relative;
   border-radius: 8px;
-  padding: 25px 30px 25px 23px;
+  padding: 18px 25px;
   box-shadow: 0 5px 35px 5px rgba(21, 21, 22, 0.1),
     0 10px 14px 0 rgba(21, 21, 22, 0.3);
   background: #fff;
@@ -15,6 +15,32 @@
   white-space: nowrap;
 }
 
-.paymentsList {
+table.paymentsList {
   margin-top: 5px;
+
+  th {
+    @include roboto-bold;
+    padding: 10px 7px;
+    font-size: 12px;
+    line-height: 16px;
+    white-space: nowrap;
+    text-align: right;
+    background: #f4f4f4;
+
+    &:first-child,
+    &:last-child {
+      text-align: left;
+    }
+
+    &:first-child {
+      padding-left: 28px;
+    }
+  }
+
+  tr {
+    td {
+      padding: 5px 7px;
+      white-space: nowrap;
+    }
+  }
 }

src/routes/WorkPeriods/components/PeriodsHistoryItem/index.jsx

@@ -74,7 +74,7 @@ const PeriodsHistoryItem = ({ isDisabled, item, data, currentStartDate }) => {
         <PaymentStatus status={data.paymentStatus} />
       </td>
       <td className={styles.daysWorked}>
-        {data.paymentStatus === PAYMENT_STATUS.PAID ? (
+        {data.paymentStatus === PAYMENT_STATUS.COMPLETED ? (
           `${daysWorked} ${daysWorked === 1 ? "Day" : "Days"}`
         ) : (
           <IntegerField

src/routes/WorkPeriods/components/PeriodsHistoryPaymentTotal/index.jsx

@@ -43,17 +43,19 @@ const PeriodsHistoryPaymentTotal = ({
 
   return (
     <div className={cn(compStyles.container, className)} ref={containerRef}>
-      <div
-        className={cn(compStyles.paymentTotal, {
-          [compStyles.hasPayments]: hasPayments,
-        })}
-        ref={setReferenceElement}
-        onClick={onWeeklyRateClick}
-      >
-        <span className={compStyles.paymentTotalSum}>
-          {currencyFormatter.format(paymentTotal)}
+      <div className={compStyles.paymentTotal}>
+        <span
+          className={cn(compStyles.paymentTotalText, {
+            [compStyles.hasPayments]: hasPayments,
+          })}
+          ref={setReferenceElement}
+          onClick={onWeeklyRateClick}
+        >
+          <span className={compStyles.paymentTotalSum}>
+            {currencyFormatter.format(paymentTotal)}
+          </span>
+          <span className={compStyles.daysPaid}> ({daysPaid})</span>
         </span>
-        <span className={compStyles.daysPaid}> ({daysPaid})</span>
       </div>
       {hasPayments && isShowPopup && (
         <div

src/routes/WorkPeriods/components/PeriodsHistoryPaymentTotal/styles.module.scss

@@ -1,3 +1,5 @@
+@import "styles/variables";
+
 .container {
   position: relative;
 
@@ -7,23 +9,25 @@
 }
 
 .paymentTotal {
+  width: 90px;
+  text-align: right;
   white-space: nowrap;
 }
 
-.paymentTotalSum {
+.paymentTotalText {
   display: inline-block;
-  width: 70px;
-  text-align: right;
+  line-height: 16px;
+
+  &.hasPayments {
+    border-bottom: 1px dashed $text-color;
+    cursor: pointer;
+  }
 }
 
 .daysPaid {
   color: #aaa;
 }
 
-.hasPayments {
-  cursor: pointer;
-}
-
 .popup {
   z-index: 1;
 }

src/utils/workPeriods.js

@@ -1,5 +1,10 @@
 import moment from "moment";
-import { API_PAYMENT_STATUS_MAP, DATE_FORMAT_UI } from "constants/workPeriods";
+import {
+  API_CHALLENGE_PAYMENT_STATUS_MAP,
+  API_PAYMENT_STATUS_MAP,
+  DATE_FORMAT_UI,
+  PAYMENT_STATUS,
+} from "constants/workPeriods";
 
 export function normalizePeriodItems(items) {
   const empty = {};
@@ -81,11 +86,12 @@ export function createAssignedBillingAccountOption(accountId) {
 export function normalizeDetailsPeriodItems(items) {
   const periods = [];
   for (let item of items) {
+    let payments = item.payments || [];
     periods.push({
       id: item.id,
       startDate: item.startDate ? moment(item.startDate).valueOf() : 0,
       endDate: item.endDate ? moment(item.endDate).valueOf() : 0,
-      payments: item.payments || [],
+      payments: payments.length ? normalizeDetailsPayments(payments) : payments,
       weeklyRate: item.memberRate,
       data: normalizePeriodData(item),
     });
@@ -94,6 +100,15 @@ export function normalizeDetailsPeriodItems(items) {
   return periods;
 }
 
+function normalizeDetailsPayments(payments) {
+  for (let payment of payments) {
+    payment.status =
+      API_CHALLENGE_PAYMENT_STATUS_MAP[payment.status] ||
+      PAYMENT_STATUS.UNDEFINED;
+  }
+  return payments;
+}
+
 export function normalizePaymentStatus(paymentStatus) {
   return API_PAYMENT_STATUS_MAP[paymentStatus];
 }