[SDP-1138]: Add seconds to payment history in Payment Details (#87)

stellar · Apr 2, 2024 · b97343e · b97343e
1 parent 278767f
commit b97343e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/helpers/formatIntlDateTime.ts b/src/helpers/formatIntlDateTime.ts
@@ -25,3 +25,17 @@ export const formatDateTime = (dateTime?: string) => {
 
   return dateTimeFormatter.format(date);
 };
+
+export const formatDateTimeWithSeconds = (dateTime?: string) => {
+  const date = dateTime ? new Date(dateTime) : new Date();
+  const dateTimeFormatter = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+
+  return dateTimeFormatter.format(date);
+};
diff --git a/src/pages/PaymentDetails.tsx b/src/pages/PaymentDetails.tsx
@@ -20,7 +20,10 @@ import {
   CANCELED_PAYMENT_STATUS,
   READY_PAYMENT_STATUS,
 } from "constants/settings";
-import { formatDateTime } from "helpers/formatIntlDateTime";
+import {
+  formatDateTime,
+  formatDateTimeWithSeconds,
+} from "helpers/formatIntlDateTime";
 import { shortenString } from "helpers/shortenString";
 import { formatPaymentDetails } from "helpers/formatPaymentDetails";
 
@@ -179,7 +182,9 @@ export const PaymentDetails = () => {
                 <div className="PaymentDetails__wrapper">
                   <div className="PaymentDetails__info">
                     <label className="Label">Created at</label>
-                    <div>{formatDateTime(formattedPayment.createdAt)}</div>
+                    <div>
+                      {formatDateTimeWithSeconds(formattedPayment.createdAt)}
+                    </div>
                   </div>
 
                   <div className="PaymentDetails__info">
@@ -297,7 +302,7 @@ export const PaymentDetails = () => {
                       </Table.BodyCell>
                       <Table.BodyCell textAlign="right">
                         <span className="Table-v2__cell--secondary">
-                          {formatDateTime(h.updatedAt)}
+                          {formatDateTimeWithSeconds(h.updatedAt)}
                         </span>
                       </Table.BodyCell>
                     </Table.BodyRow>