fix: Change Transaction history to full timestamp

* Use custom fn as dayjs has no way to display timezones * Try and remove moment
bcgov · Jan 17, 2025 · 7503fbf · 7503fbf
1 parent 30c4d17
commit 7503fbf
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 17 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -60,7 +60,6 @@
     "keycloak-js": "^23.0.3",
     "lodash": "^4.17.21",
     "material-ui-popup-state": "^5.0.10",
-    "moment": "^2.30.1",
     "mui-daterange-picker-plus": "^1.0.4",
     "notistack": "^3.0.1",
     "papaparse": "^5.4.1",

diff --git a/frontend/src/views/FinalSupplyEquipments/_schema.jsx b/frontend/src/views/FinalSupplyEquipments/_schema.jsx
@@ -10,9 +10,12 @@ import {
 } from '@/components/BCDataGrid/components'
 import i18n from '@/i18n'
 import { actions, validation } from '@/components/BCDataGrid/columns'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import { CommonArrayRenderer } from '@/utils/grid/cellRenderers'
-import { StandardCellWarningAndErrors, StandardCellErrors } from '@/utils/grid/errorRenderers'
+import {
+  StandardCellWarningAndErrors,
+  StandardCellErrors
+} from '@/utils/grid/errorRenderers'
 import { apiRoutes } from '@/constants/routes'
 import { numberFormatter } from '@/utils/formatters.js'
 
@@ -56,26 +59,29 @@ export const finalSupplyEquipmentColDefs = (
       multiple: false,
       disableCloseOnSelect: false,
       freeSolo: true,
-      openOnFocus: true,
+      openOnFocus: true
     },
-    cellStyle: (params) =>
-      StandardCellWarningAndErrors(params, errors),
+    cellStyle: (params) => StandardCellWarningAndErrors(params, errors),
     suppressKeyboardEvent,
     minWidth: 260,
     editable: true,
     valueGetter: (params) => {
-      return params.data?.organizationName || '';
+      return params.data?.organizationName || ''
     },
     valueSetter: (params) => {
       if (params.newValue) {
-        const isValidOrganizationName = optionsData?.organizationNames.includes(params.newValue);
+        const isValidOrganizationName = optionsData?.organizationNames.includes(
+          params.newValue
+        )
 
-        params.data.organizationName = isValidOrganizationName ? params.newValue : params.newValue;
-        return true;
+        params.data.organizationName = isValidOrganizationName
+          ? params.newValue
+          : params.newValue
+        return true
       }
-      return false;
+      return false
     },
-  tooltipValueGetter: (params) => "Select the organization name from the list"
+    tooltipValueGetter: (params) => 'Select the organization name from the list'
   },
   {
     field: 'supplyFrom',
@@ -95,8 +101,8 @@ export const finalSupplyEquipmentColDefs = (
     cellStyle: (params) => StandardCellErrors(params, errors),
     cellEditor: DateRangeCellEditor,
     cellEditorParams: {
-      minDate: moment(`${compliancePeriod}-01-01`, 'YYYY-MM-DD').toDate(),
-      maxDate: moment(`${compliancePeriod}-12-31`, 'YYYY-MM-DD').toDate()
+      minDate: dayjs(`${compliancePeriod}-01-01`, 'YYYY-MM-DD').toDate(),
+      maxDate: dayjs(`${compliancePeriod}-12-31`, 'YYYY-MM-DD').toDate()
     },
     cellEditorPopup: true,
     valueGetter: (params) => {

diff --git a/frontend/src/views/Transfers/components/TransferHistory.jsx b/frontend/src/views/Transfers/components/TransferHistory.jsx
@@ -53,6 +53,21 @@ function TransferHistory({ transferHistory }) {
   const diffMonths = diff?.months() || 0
   const diffDays = diff?.days() || 0
 
+  const formatWithTimezoneAbbr = (dateInput) => {
+    const time = dayjs(dateInput)
+    const formattedDate = time.format('LLL')
+
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      timeZoneName: 'short'
+    })
+    const parts = formatter.formatToParts(time.toDate())
+    const timeZoneName = parts.find(
+      (part) => part.type === 'timeZoneName'
+    ).value
+
+    return `${formattedDate} ${timeZoneName}`
+  }
+
   let category = 'A'
   if (
     (diffYears === 0 && diffMonths >= 6 && diffDays > 0) ||
@@ -74,7 +89,7 @@ function TransferHistory({ transferHistory }) {
             TRANSFER_STATUSES.SENT,
             TRANSFER_STATUSES.SUBMITTED,
             TRANSFER_STATUSES.RECOMMENDED,
-            TRANSFER_STATUSES.RECORDED,
+            TRANSFER_STATUSES.RECORDED
           ].includes(currentStatus) &&
             agreementDate && (
               <li>
@@ -109,7 +124,7 @@ function TransferHistory({ transferHistory }) {
               <BCTypography variant="body2" component="div">
                 <b>{getTransferStatusLabel(item.transferStatus?.status)}</b>{' '}
                 <span> on </span>
-                {dayjs(item.createDate).format('LL')}
+                {formatWithTimezoneAbbr(item.createDate)}
                 <span> by </span>
                 <strong>
                   {' '}