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)/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>