Revert date-fs

dashboard/package-lock.json

@@ -47,7 +47,6 @@
         "cron-validator": "^1.3.1",
         "d3-array": "^2.11.0",
         "d3-time-format": "^3.0.0",
-        "date-fns": "^3.6.0",
         "dayjs": "^1.11.5",
         "deep-diff": "^1.0.2",
         "dotenv": "^8.2.0",
@@ -3568,22 +3567,6 @@
         "react-popper": "^2.2.5"
       }
     },
-    "node_modules/@types/react-datepicker/node_modules/date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/date-fns"
-      }
-    },
     "node_modules/@types/react-dom": {
       "version": "18.0.11",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.11.tgz",
@@ -7006,12 +6989,15 @@
       "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
     },
     "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
       }
     },
     "node_modules/dayjs": {
@@ -13682,21 +13668,6 @@
         "react-dom": "^16.9.0 || ^17 || ^18"
       }
     },
-    "node_modules/react-datepicker/node_modules/date-fns": {
-      "version": "2.30.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-      "dependencies": {
-        "@babel/runtime": "^7.21.0"
-      },
-      "engines": {
-        "node": ">=0.11"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/date-fns"
-      }
-    },
     "node_modules/react-diff-viewer": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/react-diff-viewer/-/react-diff-viewer-3.1.1.tgz",
@@ -20788,17 +20759,6 @@
         "@types/react": "*",
         "date-fns": "^2.0.1",
         "react-popper": "^2.2.5"
-      },
-      "dependencies": {
-        "date-fns": {
-          "version": "2.30.0",
-          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-          "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.21.0"
-          }
-        }
       }
     },
     "@types/react-dom": {
@@ -23605,9 +23565,9 @@
       "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg=="
     },
     "date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
     },
     "dayjs": {
       "version": "1.11.7",
@@ -28714,16 +28674,6 @@
         "prop-types": "^15.7.2",
         "react-onclickoutside": "^6.12.2",
         "react-popper": "^2.3.0"
-      },
-      "dependencies": {
-        "date-fns": {
-          "version": "2.30.0",
-          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
-          "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
-          "requires": {
-            "@babel/runtime": "^7.21.0"
-          }
-        }
       }
     },
     "react-diff-viewer": {

dashboard/package.json

@@ -42,7 +42,6 @@
     "cron-validator": "^1.3.1",
     "d3-array": "^2.11.0",
     "d3-time-format": "^3.0.0",
-    "date-fns": "^3.6.0",
     "dayjs": "^1.11.5",
     "deep-diff": "^1.0.2",
     "dotenv": "^8.2.0",

dashboard/src/main/home/project-settings/BillingPage.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useState } from "react";
 import ParentSize from "@visx/responsive/lib/components/ParentSize";
-import { intlFormatDistance } from "date-fns";
 import styled from "styled-components";
 
 import Loading from "components/Loading";
@@ -50,11 +49,34 @@ function BillingPage(): JSX.Element {
   const formatCredits = (credits: number): string => {
     return (credits / 100).toFixed(2);
   };
+  const monthDiff = (d1: Date, d2: Date): number => {
+    let months;
+    months = (d2.getFullYear() - d1.getFullYear()) * 12;
+    months -= d1.getMonth();
+    months += d2.getMonth();
+    return months <= 0 ? 0 : months;
+  };
+
+  const daysDiff = (d1: Date, d2: Date): number => {
+    const _MS_PER_DAY = 1000 * 60 * 60 * 24;
+    const utc1 = Date.UTC(d1.getFullYear(), d1.getMonth(), d1.getDate());
+    const utc2 = Date.UTC(d2.getFullYear(), d2.getMonth(), d2.getDate());
+
+    return Math.floor((utc2 - utc1) / _MS_PER_DAY);
+  };
 
   const relativeTime = (timestampUTC: string): string => {
     const tsDate = new Date(timestampUTC);
     const now = new Date();
-    return intlFormatDistance(tsDate, now);
+
+    const remainingMonths = monthDiff(now, tsDate);
+    const remainingDays = daysDiff(now, tsDate);
+
+    const relativeFormat = remainingMonths > 0 ? "months" : "days";
+    const relativeValue = remainingMonths > 0 ? remainingMonths : remainingDays;
+
+    const rt = new Intl.RelativeTimeFormat("en", { style: "short" });
+    return rt.format(relativeValue, relativeFormat);
   };
 
   const readableDate = (s: string): string => new Date(s).toLocaleDateString();