Added creation time column to payments' list.

Author: MadOPcode

src/constants/workPeriods.js

@@ -31,6 +31,9 @@ export const TAAS_TEAM_API_URL = `${API.V5}/taas-teams`;
 export const DATE_FORMAT_API = "YYYY-MM-DD";
 export const DATE_FORMAT_ISO = "YYYY-MM-DD";
 export const DATE_FORMAT_UI = "MMM DD, YYYY";
+export const DATETIME_FORMAT_UI = "MMM DD, YYYY h:mm a";
+
+export const TIMEZONE_SOURCE = "America/New_York";
 
 // Field names that are required to be retrieved for display, filtering and sorting.
 export const API_REQUIRED_FIELDS = [

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

@@ -19,6 +19,7 @@ const PaymentsList = ({ className, daysPaid, daysWorked, payments }) => (
           <th>Weekly Rate</th>
           <th>Days</th>
           <th>Amount</th>
+          <th className={styles.createdAt}>Created At</th>
           <th className={styles.paymentStatus}>Status</th>
           <th></th>
         </tr>

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

@@ -25,6 +25,7 @@ table.paymentsList {
         background: #f4f4f4;
 
         &:first-child,
+        &.createdAt,
         &.paymentStatus {
           text-align: left;
         }

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

@@ -5,7 +5,11 @@ import PT from "prop-types";
 import PaymentActions from "../PaymentActions";
 import PaymentError from "../PaymentError";
 import PaymentStatus from "../PaymentStatus";
-import { currencyFormatter, formatChallengeUrl } from "utils/formatters";
+import {
+  currencyFormatter,
+  formatChallengeUrl,
+  formatDateTimeInTimeZone,
+} from "utils/formatters";
 import { PAYMENT_STATUS } from "constants/workPeriods";
 import styles from "./styles.module.scss";
 
@@ -55,6 +59,9 @@ const PaymentsListItem = ({ daysPaid, daysWorked, item }) => {
       </td>
       <td className={styles.days}>{item.days}</td>
       <td className={styles.amount}>{currencyFormatter.format(item.amount)}</td>
+      <td className={styles.createdAt}>
+        {formatDateTimeInTimeZone(item.createdAt)}
+      </td>
       <td className={styles.paymentStatus}>
         <div className={styles.statusWithError}>
           <PaymentStatus status={item.status} />
@@ -84,6 +91,7 @@ PaymentsListItem.propTypes = {
     id: PT.oneOfType([PT.string, PT.number]).isRequired,
     amount: PT.number.isRequired,
     challengeId: PT.oneOfType([PT.string, PT.number]),
+    createdAt: PT.number.isRequired,
     days: PT.number.isRequired,
     memberRate: PT.number.isRequired,
     status: PT.string.isRequired,

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

@@ -58,6 +58,10 @@
   text-align: right;
 }
 
+.createdAt {
+  text-align: left;
+}
+
 .paymentStatus {
   white-space: nowrap;
 }

src/utils/formatters.js

@@ -1,6 +1,11 @@
-import moment from "moment";
+import moment from "moment-timezone";
 import isNumber from "lodash/isNumber";
-import { DATE_FORMAT_UI, PAYMENT_STATUS_LABELS } from "constants/workPeriods";
+import {
+  DATETIME_FORMAT_UI,
+  DATE_FORMAT_UI,
+  PAYMENT_STATUS_LABELS,
+  TIMEZONE_SOURCE,
+} from "constants/workPeriods";
 import {
   PLATFORM_WEBSITE_URL,
   TAAS_BASE_PATH,
@@ -29,6 +34,19 @@ export function formatDate(date) {
   return date ? moment(date).format(DATE_FORMAT_UI) : "-";
 }
 
+const TIMEZONE_BROWSER = moment.tz.guess();
+
+/**
+ * Formats the date and time using the provided timezone.
+ *
+ * @param {*} dateTime value that can be parsed by Moment
+ * @param {string} [tz] timezone in which the resulting time will be displayed
+ * @returns {string}
+ */
+export function formatDateTimeInTimeZone(dateTime, tz = TIMEZONE_BROWSER) {
+  return moment.tz(dateTime, TIMEZONE_SOURCE).tz(tz).format(DATETIME_FORMAT_UI);
+}
+
 /**
  * Returns a string denoting whether the specified start date corresponds to the
  * current period or future period.

src/utils/misc.js

@@ -253,4 +253,3 @@ export function validateAmount(value) {
     amount < 1e5
   );
 }
-

src/utils/workPeriods.js

@@ -1,12 +1,12 @@
-import moment from "moment";
+import moment from "moment-timezone";
 import {
   ALERT,
   API_CHALLENGE_PAYMENT_STATUS_MAP,
   API_PAYMENT_STATUS_MAP,
-  DATE_FORMAT_API,
   DATE_FORMAT_ISO,
   PAYMENT_STATUS,
   REASON_DISABLED,
+  TIMEZONE_SOURCE,
   URL_QUERY_PARAM_MAP,
 } from "constants/workPeriods";
 
@@ -127,7 +127,7 @@ export function makeUrlQuery(state) {
   const { pageNumber, pageSize } = pagination;
   const { criteria, order } = sorting;
   const params = {
-    startDate: dateRange[0].format(DATE_FORMAT_API),
+    startDate: dateRange[0].format(DATE_FORMAT_ISO),
     paymentStatuses: Object.keys(paymentStatuses).join(",").toLowerCase(),
     alertOptions: Object.keys(alertOptions).join(",").toLowerCase(),
     onlyFailedPayments: onlyFailedPayments ? "y" : "",
@@ -230,7 +230,7 @@ export function normalizePeriodData(period) {
 export function normalizePeriodPayments(payments, data) {
   let lastFailedPayment = null;
   for (let payment of payments) {
-    payment.createdAt = moment(payment.createdAt).valueOf();
+    payment.createdAt = moment.tz(payment.createdAt, TIMEZONE_SOURCE).valueOf();
     payment.status = normalizeChallengePaymentStatus(payment.status);
     if (payment.status === PAYMENT_STATUS.FAILED) {
       lastFailedPayment = payment;