fix: refactor dates (#1321)

## Description

Refactor the current date formatting system to utilize Lingui.

## Changes Made

- Remove redundant `LocaleData` component with Lingui dates

## Important notes

For the internal pages for certificates, default to en-US to format any
dates.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Enhanced internationalization support across various components by
utilizing the `i18n` object for date formatting.
- Streamlined locale management by removing cookie-based language
handling and adopting a more centralized approach.

- **Bug Fixes**
- Improved date formatting consistency by replacing the `LocaleDate`
component with direct calls to `i18n.date()` in multiple components.

- **Documentation**
- Updated localization strings in the `web.po` files to reflect recent
changes in the source code structure.

- **Chores**
- Minor formatting adjustments and code organization improvements across
various files to enhance readability and maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: github-actions <github-actions@documenso.com>

apps/web/src/app/(dashboard)/admin/documents/[id]/page.tsx

@@ -12,7 +12,6 @@ import {
 import { Badge } from '@documenso/ui/primitives/badge';
 
 import { DocumentStatus } from '~/components/formatter/document-status';
-import { LocaleDate } from '~/components/formatter/locale-date';
 
 import { AdminActions } from './admin-actions';
 import { RecipientItem } from './recipient-item';
@@ -25,7 +24,7 @@ type AdminDocumentDetailsPageProps = {
 };
 
 export default async function AdminDocumentDetailsPage({ params }: AdminDocumentDetailsPageProps) {
-  setupI18nSSR();
+  const { i18n } = setupI18nSSR();
 
   const document = await getEntireDocument({ id: Number(params.id) });
 
@@ -46,12 +45,11 @@ export default async function AdminDocumentDetailsPage({ params }: AdminDocument
 
       <div className="text-muted-foreground mt-4 text-sm">
         <div>
-          <Trans>Created on</Trans>:{' '}
-          <LocaleDate date={document.createdAt} format={DateTime.DATETIME_MED} />
+          <Trans>Created on</Trans>: {i18n.date(document.createdAt, DateTime.DATETIME_MED)}
         </div>
+
         <div>
-          <Trans>Last updated at</Trans>:{' '}
-          <LocaleDate date={document.updatedAt} format={DateTime.DATETIME_MED} />
+          <Trans>Last updated at</Trans>: {i18n.date(document.updatedAt, DateTime.DATETIME_MED)}
         </div>
       </div>
 

apps/web/src/app/(dashboard)/admin/documents/document-results.tsx

@@ -21,12 +21,11 @@ import { Input } from '@documenso/ui/primitives/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
 import { DocumentStatus } from '~/components/formatter/document-status';
-import { LocaleDate } from '~/components/formatter/locale-date';
 
 // export type AdminDocumentResultsProps = {};
 
 export const AdminDocumentResults = () => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
 
   const searchParams = useSearchParams();
 
@@ -62,7 +61,7 @@ export const AdminDocumentResults = () => {
       {
         header: _(msg`Created`),
         accessorKey: 'createdAt',
-        cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        cell: ({ row }) => i18n.date(row.original.createdAt),
       },
       {
         header: _(msg`Title`),
@@ -122,7 +121,7 @@ export const AdminDocumentResults = () => {
       {
         header: 'Last updated',
         accessorKey: 'updatedAt',
-        cell: ({ row }) => <LocaleDate date={row.original.updatedAt} />,
+        cell: ({ row }) => i18n.date(row.original.updatedAt),
       },
     ] satisfies DataTableColumnDef<(typeof results)['data'][number]>[];
   }, []);

apps/web/src/app/(dashboard)/documents/[id]/document-page-view-information.tsx

@@ -7,7 +7,6 @@ import { useLingui } from '@lingui/react';
 import { DateTime } from 'luxon';
 
 import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
-import { useLocale } from '@documenso/lib/client-only/providers/locale';
 import type { Document, Recipient, User } from '@documenso/prisma/client';
 
 export type DocumentPageViewInformationProps = {
@@ -24,21 +23,9 @@ export const DocumentPageViewInformation = ({
 }: DocumentPageViewInformationProps) => {
   const isMounted = useIsMounted();
 
-  const { locale } = useLocale();
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
 
   const documentInformation = useMemo(() => {
-    let createdValue = DateTime.fromJSDate(document.createdAt).toFormat('MMMM d, yyyy');
-    let lastModifiedValue = DateTime.fromJSDate(document.updatedAt).toRelative();
-
-    if (!isMounted) {
-      createdValue = DateTime.fromJSDate(document.createdAt)
-        .setLocale(locale)
-        .toFormat('MMMM d, yyyy');
-
-      lastModifiedValue = DateTime.fromJSDate(document.updatedAt).setLocale(locale).toRelative();
-    }
-
     return [
       {
         description: msg`Uploaded by`,
@@ -46,15 +33,19 @@ export const DocumentPageViewInformation = ({
       },
       {
         description: msg`Created`,
-        value: createdValue,
+        value: DateTime.fromJSDate(document.createdAt)
+          .setLocale(i18n.locales?.[0] || i18n.locale)
+          .toFormat('MMMM d, yyyy'),
       },
       {
         description: msg`Last modified`,
-        value: lastModifiedValue,
+        value: DateTime.fromJSDate(document.updatedAt)
+          .setLocale(i18n.locales?.[0] || i18n.locale)
+          .toRelative(),
       },
     ];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMounted, document, locale, userId]);
+  }, [isMounted, document, userId]);
 
   return (
     <section className="dark:bg-background text-foreground border-border bg-widget flex flex-col rounded-xl border">

apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-data-table.tsx

@@ -20,8 +20,6 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
-import { LocaleDate } from '~/components/formatter/locale-date';
-
 export type DocumentLogsDataTableProps = {
   documentId: number;
 };
@@ -32,7 +30,7 @@ const dateFormat: DateTimeFormatOptions = {
 };
 
 export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps) => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
 
   const searchParams = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
@@ -78,7 +76,7 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
       {
         header: _(msg`Time`),
         accessorKey: 'createdAt',
-        cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
+        cell: ({ row }) => i18n.date(row.original.createdAt, dateFormat),
       },
       {
         header: _(msg`User`),
@@ -106,9 +104,7 @@ export const DocumentLogsDataTable = ({ documentId }: DocumentLogsDataTableProps
         header: _(msg`Action`),
         accessorKey: 'type',
         cell: ({ row }) => (
-          <span>
-            {uppercaseFistLetter(formatDocumentAuditLogAction(row.original).description)}
-          </span>
+          <span>{uppercaseFistLetter(formatDocumentAuditLogAction(row.original).description)}</span>
         ),
       },
       {

apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx

@@ -9,7 +9,6 @@ import { DateTime } from 'luxon';
 
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-component-session';
 import { getDocumentById } from '@documenso/lib/server-only/document/get-document-by-id';
-import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
 import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/get-recipients-for-document';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 import type { Recipient, Team } from '@documenso/prisma/client';
@@ -32,9 +31,7 @@ export type DocumentLogsPageViewProps = {
 };
 
 export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageViewProps) => {
-  const { _ } = useLingui();
-
-  const locale = getLocale();
+  const { _, i18n } = useLingui();
 
   const { id } = params;
 
@@ -87,13 +84,13 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
     {
       description: msg`Date created`,
       value: DateTime.fromJSDate(document.createdAt)
-        .setLocale(locale)
+        .setLocale(i18n.locales?.[0] || i18n.locale)
         .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {
       description: msg`Last updated`,
       value: DateTime.fromJSDate(document.updatedAt)
-        .setLocale(locale)
+        .setLocale(i18n.locales?.[0] || i18n.locale)
         .toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS),
     },
     {

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -18,7 +18,6 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 
 import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
-import { LocaleDate } from '~/components/formatter/locale-date';
 
 import { DataTableActionButton } from './data-table-action-button';
 import { DataTableActionDropdown } from './data-table-action-dropdown';
@@ -41,8 +40,9 @@ export const DocumentsDataTable = ({
   showSenderColumn,
   team,
 }: DocumentsDataTableProps) => {
+  const { _, i18n } = useLingui();
+
   const { data: session } = useSession();
-  const { _ } = useLingui();
 
   const [isPending, startTransition] = useTransition();
 
@@ -53,12 +53,8 @@ export const DocumentsDataTable = ({
       {
         header: _(msg`Created`),
         accessorKey: 'createdAt',
-        cell: ({ row }) => (
-          <LocaleDate
-            date={row.original.createdAt}
-            format={{ ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }}
-          />
-        ),
+        cell: ({ row }) =>
+          i18n.date(row.original.createdAt, { ...DateTime.DATETIME_SHORT, hourCycle: 'h12' }),
       },
       {
         header: _(msg`Title`),
@@ -88,8 +84,7 @@ export const DocumentsDataTable = ({
       {
         header: _(msg`Actions`),
         cell: ({ row }) =>
-          (!row.original.deletedAt ||
-            row.original.status === ExtendedDocumentStatus.COMPLETED) && (
+          (!row.original.deletedAt || row.original.status === ExtendedDocumentStatus.COMPLETED) && (
             <div className="flex items-center gap-x-4">
               <DataTableActionButton team={team} row={row.original} />
               <DataTableActionDropdown team={team} row={row.original} />

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -16,8 +16,6 @@ import { type Stripe } from '@documenso/lib/server-only/stripe';
 import { getSubscriptionsByUserId } from '@documenso/lib/server-only/subscription/get-subscriptions-by-user-id';
 import { SubscriptionStatus } from '@documenso/prisma/client';
 
-import { LocaleDate } from '~/components/formatter/locale-date';
-
 import { BillingPlans } from './billing-plans';
 import { BillingPortalButton } from './billing-portal-button';
 
@@ -26,7 +24,7 @@ export const metadata: Metadata = {
 };
 
 export default async function BillingSettingsPage() {
-  setupI18nSSR();
+  const { i18n } = setupI18nSSR();
 
   let { user } = await getRequiredServerComponentSession();
 
@@ -104,12 +102,12 @@ export default async function BillingSettingsPage() {
                     {subscription.cancelAtPeriodEnd ? (
                       <span>
                         end on{' '}
-                        <LocaleDate className="font-semibold" date={subscription.periodEnd} />.
+                        <span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span>
                       </span>
                     ) : (
                       <span>
                         automatically renew on{' '}
-                        <LocaleDate className="font-semibold" date={subscription.periodEnd} />.
+                        <span className="font-semibold">{i18n.date(subscription.periodEnd)}.</span>
                       </span>
                     )}
                   </span>

apps/web/src/app/(dashboard)/settings/security/activity/user-security-activity-data-table.tsx

@@ -20,15 +20,13 @@ import { DataTablePagination } from '@documenso/ui/primitives/data-table-paginat
 import { Skeleton } from '@documenso/ui/primitives/skeleton';
 import { TableCell } from '@documenso/ui/primitives/table';
 
-import { LocaleDate } from '~/components/formatter/locale-date';
-
 const dateFormat: DateTimeFormatOptions = {
   ...DateTime.DATETIME_SHORT,
   hourCycle: 'h12',
 };
 
 export const UserSecurityActivityDataTable = () => {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
 
   const pathname = usePathname();
   const router = useRouter();
@@ -71,7 +69,7 @@ export const UserSecurityActivityDataTable = () => {
       {
         header: _(msg`Date`),
         accessorKey: 'createdAt',
-        cell: ({ row }) => <LocaleDate format={dateFormat} date={row.original.createdAt} />,
+        cell: ({ row }) => i18n.date(row.original.createdAt, dateFormat),
       },
       {
         header: _(msg`Device`),

apps/web/src/app/(dashboard)/settings/tokens/page.tsx

@@ -7,11 +7,10 @@ import { getUserTokens } from '@documenso/lib/server-only/public-api/get-all-use
 import { Button } from '@documenso/ui/primitives/button';
 
 import DeleteTokenDialog from '~/components/(dashboard)/settings/token/delete-token-dialog';
-import { LocaleDate } from '~/components/formatter/locale-date';
 import { ApiTokenForm } from '~/components/forms/token';
 
 export default async function ApiTokensPage() {
-  setupI18nSSR();
+  const { i18n } = setupI18nSSR();
 
   const { user } = await getRequiredServerComponentSession();
 
@@ -65,13 +64,11 @@ export default async function ApiTokensPage() {
                   <h5 className="text-base">{token.name}</h5>
 
                   <p className="text-muted-foreground mt-2 text-xs">
-                    <Trans>Created on</Trans>{' '}
-                    <LocaleDate date={token.createdAt} format={DateTime.DATETIME_FULL} />
+                    <Trans>Created on {i18n.date(token.createdAt, DateTime.DATETIME_FULL)}</Trans>
                   </p>
                   {token.expires ? (
                     <p className="text-muted-foreground mt-1 text-xs">
-                      <Trans>Expires on</Trans>{' '}
-                      <LocaleDate date={token.expires} format={DateTime.DATETIME_FULL} />
+                      <Trans>Expires on {i18n.date(token.expires, DateTime.DATETIME_FULL)}</Trans>
                     </p>
                   ) : (
                     <p className="text-muted-foreground mt-1 text-xs">

apps/web/src/app/(dashboard)/settings/webhooks/page.tsx

@@ -16,10 +16,9 @@ import { Button } from '@documenso/ui/primitives/button';
 import { SettingsHeader } from '~/components/(dashboard)/settings/layout/header';
 import { CreateWebhookDialog } from '~/components/(dashboard)/settings/webhooks/create-webhook-dialog';
 import { DeleteWebhookDialog } from '~/components/(dashboard)/settings/webhooks/delete-webhook-dialog';
-import { LocaleDate } from '~/components/formatter/locale-date';
 
 export default function WebhookPage() {
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
 
   const { data: webhooks, isLoading } = trpc.webhook.getWebhooks.useQuery();
 
@@ -86,10 +85,7 @@ export default function WebhookPage() {
                   </p>
 
                   <p className="text-muted-foreground mt-2 text-xs">
-                    <Trans>
-                      Created on{' '}
-                      <LocaleDate date={webhook.createdAt} format={DateTime.DATETIME_FULL} />
-                    </Trans>
+                    <Trans>Created on {i18n.date(webhook.createdAt, DateTime.DATETIME_FULL)}</Trans>
                   </p>
                 </div>
 

apps/web/src/app/(dashboard)/templates/data-table-templates.tsx

@@ -17,7 +17,6 @@ import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-import { LocaleDate } from '~/components/formatter/locale-date';
 import { TemplateType } from '~/components/formatter/template-type';
 
 import { DataTableActionDropdown } from './data-table-action-dropdown';
@@ -48,7 +47,7 @@ export const TemplatesDataTable = ({
 
   const updateSearchParams = useUpdateSearchParams();
 
-  const { _ } = useLingui();
+  const { _, i18n } = useLingui();
   const { remaining } = useLimits();
 
   const columns = useMemo(() => {
@@ -56,7 +55,7 @@ export const TemplatesDataTable = ({
       {
         header: _(msg`Created`),
         accessorKey: 'createdAt',
-        cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
+        cell: ({ row }) => i18n.date(row.original.createdAt),
       },
       {
         header: _(msg`Title`),
@@ -81,8 +80,8 @@ export const TemplatesDataTable = ({
 
                     <p>
                       <Trans>
-                        Public templates are connected to your public profile. Any modifications
-                        to public templates will also appear in your public profile.
+                        Public templates are connected to your public profile. Any modifications to
+                        public templates will also appear in your public profile.
                       </Trans>
                     </p>
                   </li>
@@ -94,9 +93,9 @@ export const TemplatesDataTable = ({
 
                     <p>
                       <Trans>
-                        Direct link templates contain one dynamic recipient placeholder. Anyone
-                        with access to this link can sign the document, and it will then appear
-                        on your documents page.
+                        Direct link templates contain one dynamic recipient placeholder. Anyone with
+                        access to this link can sign the document, and it will then appear on your
+                        documents page.
                       </Trans>
                     </p>
                   </li>
@@ -109,8 +108,8 @@ export const TemplatesDataTable = ({
                     <p>
                       {teamId ? (
                         <Trans>
-                          Team only templates are not linked anywhere and are visible only to
-                          your team.
+                          Team only templates are not linked anywhere and are visible only to your
+                          team.
                         </Trans>
                       ) : (
                         <Trans>Private templates can only be modified and viewed by you.</Trans>