formatDateTimeSmart

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/sales/sale-table.tsx

@@ -24,6 +24,7 @@ import {
   DICEBEAR_AVATAR_URL,
   fetcher,
   formatDateTime,
+  formatDateTimeSmart,
 } from "@dub/utils";
 import { useParams } from "next/navigation";
 import { memo } from "react";
@@ -80,10 +81,7 @@ const SaleTableBusinessInner = memo(
           header: "Date",
           cell: ({ row }) => (
             <p title={formatDateTime(row.original.createdAt)}>
-              {formatDateTime(row.original.createdAt, {
-                month: "short",
-                year: undefined,
-              })}
+              {formatDateTimeSmart(row.original.createdAt)}
             </p>
           ),
         },

apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/earnings/earnings-table.tsx

@@ -21,6 +21,7 @@ import {
   currencyFormatter,
   fetcher,
   formatDateTime,
+  formatDateTimeSmart,
   getApexDomain,
   getPrettyUrl,
 } from "@dub/utils";
@@ -72,10 +73,7 @@ export function EarningsTablePartner({ limit }: { limit?: number }) {
         minSize: 140,
         cell: ({ row }) => (
           <p title={formatDateTime(row.original.createdAt)}>
-            {formatDateTime(row.original.createdAt, {
-              month: "short",
-              year: undefined,
-            })}
+            {formatDateTimeSmart(row.original.createdAt)}
           </p>
         ),
       },

apps/web/app/partners.dub.co/(dashboard)/settings/payouts/payout-details-sheet.tsx

@@ -20,11 +20,9 @@ import {
   currencyFormatter,
   DICEBEAR_AVATAR_URL,
   fetcher,
-} from "@dub/utils";
-import {
   formatDateTime,
-  formatPeriod,
-} from "@dub/utils/src/functions/datetime";
+} from "@dub/utils";
+import { formatPeriod } from "@dub/utils/src/functions/datetime";
 import Link from "next/link";
 import { Dispatch, Fragment, SetStateAction, useMemo } from "react";
 import useSWR from "swr";
@@ -192,7 +190,7 @@ function PayoutDetailsSheetContent({
               {sales?.length === SHEET_MAX_ITEMS && (
                 <div className="mt-2 flex justify-end">
                   <Link
-                    href={`/programs/${payout.program.slug}/sales`}
+                    href={`/programs/${payout.program.slug}/earnings?interval=all&payoutId=${payout.id}`}
                     target="_blank"
                     className={cn(
                       buttonVariants({ variant: "secondary" }),

apps/web/ui/partners/payout-details-sheet.tsx

@@ -17,11 +17,9 @@ import {
   currencyFormatter,
   DICEBEAR_AVATAR_URL,
   fetcher,
-} from "@dub/utils";
-import {
   formatDateTime,
-  formatPeriod,
-} from "@dub/utils/src/functions/datetime";
+} from "@dub/utils";
+import { formatPeriod } from "@dub/utils/src/functions/datetime";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { Dispatch, Fragment, SetStateAction, useMemo, useState } from "react";

packages/utils/src/functions/datetime/format-datetime-smart.ts

@@ -0,0 +1,22 @@
+export const formatDateTimeSmart = (
+  datetime: Date | string,
+  options?: Intl.DateTimeFormatOptions,
+) => {
+  const date = new Date(datetime);
+  const now = new Date();
+
+  return new Date(datetime).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    // if date is in previous year, show year
+    // else, hide year, show time
+    ...(date.getUTCFullYear() !== now.getUTCFullYear()
+      ? { year: "numeric" }
+      : {
+          hour: "numeric",
+          minute: "numeric",
+          hour12: true,
+        }),
+    ...options,
+  });
+};

packages/utils/src/functions/datetime/index.ts

@@ -1,6 +1,7 @@
 export * from "./billing-utils";
 export * from "./format-date";
 export * from "./format-datetime";
+export * from "./format-datetime-smart";
 export * from "./format-period";
 export * from "./get-datetime-local";
 export * from "./get-days-difference";