Use date-fns for relative time functions

dashboard/package.json

@@ -42,6 +42,7 @@
     "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/Home.tsx

@@ -24,7 +24,7 @@ import { fakeGuardedRoute } from "shared/auth/RouteGuard";
 import { Context } from "shared/Context";
 import DeploymentTargetProvider from "shared/DeploymentTargetContext";
 import { pushFiltered, pushQueryParams, type PorterUrl } from "shared/routing";
-import { relativeDate, timeFrom } from "shared/string_utils";
+import { intlFormatDistance, isPast } from "date-fns";
 import midnight from "shared/themes/midnight";
 import standard from "shared/themes/standard";
 import {
@@ -377,13 +377,7 @@ const Home: React.FC<Props> = (props) => {
     if (timestamp === "") {
       return true;
     }
-
-    const diff = timeFrom(timestamp);
-    if (diff.when === "future") {
-      return false;
-    }
-
-    return true;
+    return isPast(new Date(timestamp)) ? true : false;
   };
 
   const showCardBanner = !hasPaymentEnabled;
@@ -424,7 +418,7 @@ const Home: React.FC<Props> = (props) => {
                       connect a valid payment method
                     </Link>
                     . Your free trial is ending {" "}
-                    {relativeDate(plan.trial_info.ending_before, true)}.
+                    {intlFormatDistance(Date.parse(plan.trial_info.ending_before), new Date())}.
                   </GlobalBanner>
                 )}
                 {!trialExpired && showBillingModal && (

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

@@ -17,7 +17,7 @@ import {
   usePorterCredits,
   useSetDefaultPaymentMethod,
 } from "lib/hooks/useStripe";
-import { relativeDate } from "shared/string_utils";
+import { intlFormat, intlFormatDistance } from "date-fns";
 
 import { Context } from "shared/Context";
 import cardIcon from "assets/credit-card.svg";
@@ -82,8 +82,6 @@ function BillingPage(): JSX.Element {
     return (credits / 100).toFixed(2);
   };
 
-  const readableDate = (s: string): string => new Date(s).toLocaleDateString();
-
   const onCreate = async (): Promise<void> => {
     await refetchPaymentMethods({ throwOnError: false, cancelRefetch: false });
     setShouldCreate(false);
@@ -233,10 +231,10 @@ function BillingPage(): JSX.Element {
                         plan.trial_info.ending_before !== "" ? (
                         <Text>
                           Free trial ends{" "}
-                          {relativeDate(plan.trial_info.ending_before, true)}
+                          {intlFormatDistance(Date.parse(plan.trial_info.ending_before), new Date())}
                         </Text>
                       ) : (
-                        <Text>Started on {readableDate(plan.starting_on)}</Text>
+                        <Text>Started on {intlFormat(Date.parse(plan.starting_on))}</Text>
                       )}
                     </Container>
                   </Container>