Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: refactor dates (#1321)

Browse Source 
## 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>
This commit is contained in:
David Nguyen
2024-09-10 12:38:08 +10:00
committed by GitHub
parent bfb09e7928
commit e81023f8d4
38 changed files with 573 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/marketing/src/app/layout.tsx
View File

@ -1,7 +1,6 @@
import { Suspense } from 'react';
import { Caveat, Inter } from 'next/font/google';
import { cookies, headers } from 'next/headers';
import { AxiomWebVitals } from 'next-axiom';
import { PublicEnvScript } from 'next-runtime-env';
@ -10,8 +9,6 @@ import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/featur
import { I18nClientProvider } from '@documenso/lib/client-only/providers/i18n.client';
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
import { NEXT_PUBLIC_MARKETING_URL } from '@documenso/lib/constants/app';
import type { SUPPORTED_LANGUAGE_CODES } from '@documenso/lib/constants/i18n';
import { ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
import { getAllAnonymousFlags } from '@documenso/lib/universal/get-feature-flag';
import { TrpcProvider } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils';
@ -59,25 +56,7 @@ export function generateMetadata() {
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const flags = await getAllAnonymousFlags();
let overrideLang: (typeof SUPPORTED_LANGUAGE_CODES)[number] | undefined;
// Should be safe to remove when we upgrade NextJS.
// https://github.com/vercel/next.js/pull/65008
// Currently if the middleware sets the cookie, it's not accessible in the cookies
// during the same render.
// So we go the roundabout way of checking the header for the set-cookie value.
if (!cookies().get('i18n')) {
const setCookieValue = headers().get('set-cookie');
const i18nCookie = setCookieValue?.split(';').find((cookie) => cookie.startsWith('i18n='));
if (i18nCookie) {
const i18n = i18nCookie.split('=')[1];
overrideLang = ZSupportedLanguageCodeSchema.parse(i18n);
}
}
const { lang, i18n } = setupI18nSSR(overrideLang);
const { lang, locales, i18n } = setupI18nSSR();
return (
<html
@ -105,7 +84,10 @@ export default async function RootLayout({ children }: { children: React.ReactNo
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<PlausibleProvider>
<TrpcProvider>
<I18nClientProvider initialLocale={lang} initialMessages={i18n.messages}>
<I18nClientProvider
initialLocaleData={{ lang, locales }}
initialMessages={i18n.messages}
>
{children}
</I18nClientProvider>
</TrpcProvider>

4
apps/marketing/src/middleware.ts
View File

@ -2,10 +2,10 @@ import { cookies } from 'next/headers';
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
import { extractSupportedLanguage } from '@documenso/lib/utils/i18n';
import { extractLocaleData } from '@documenso/lib/utils/i18n';
export default function middleware(req: NextRequest) {
const lang = extractSupportedLanguage({
const { lang } = extractLocaleData({
headers: req.headers,
cookies: cookies(),
});

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

@ -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>

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

@ -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]>[];
}, []);

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

@ -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">

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

@ -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>
),
},
{

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

@ -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),
},
{

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

@ -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} />

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

@ -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>

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

@ -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`),

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

@ -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">

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

@ -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>

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

@ -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>

7
apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/data-table.tsx
View File

@ -4,6 +4,7 @@ import { DateTime } from 'luxon';
import type { DateTimeFormatOptions } from 'luxon';
import { UAParser } from 'ua-parser-js';
import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
import type { TDocumentAuditLog } from '@documenso/lib/types/document-audit-logs';
import { formatDocumentAuditLogAction } from '@documenso/lib/utils/document-audit-logs';
import {
@ -15,8 +16,6 @@ import {
TableRow,
} from '@documenso/ui/primitives/table';
import { LocaleDate } from '~/components/formatter/locale-date';
export type AuditLogDataTableProps = {
logs: TDocumentAuditLog[];
};
@ -49,7 +48,9 @@ export const AuditLogDataTable = ({ logs }: AuditLogDataTableProps) => {
{logs.map((log, i) => (
<TableRow className="break-inside-avoid" key={i}>
<TableCell>
<LocaleDate format={dateFormat} date={log.createdAt} />
{DateTime.fromJSDate(log.createdAt)
.setLocale(APP_I18N_OPTIONS.defaultLocale)
.toLocaleString(dateFormat)}
</TableCell>
<TableCell>

15
apps/web/src/app/(internal)/%5F%5Fhtmltopdf/audit-log/page.tsx
View File

@ -2,7 +2,9 @@ import React from 'react';
import { redirect } from 'next/navigation';
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
import { DateTime } from 'luxon';
import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
import { RECIPIENT_ROLES_DESCRIPTION_ENG } from '@documenso/lib/constants/recipient-roles';
import { getEntireDocument } from '@documenso/lib/server-only/admin/get-entire-document';
import { decryptSecondaryData } from '@documenso/lib/server-only/crypto/decrypt';
@ -10,7 +12,6 @@ import { findDocumentAuditLogs } from '@documenso/lib/server-only/document/find-
import { Card, CardContent } from '@documenso/ui/primitives/card';
import { Logo } from '~/components/branding/logo';
import { LocaleDate } from '~/components/formatter/locale-date';
import { AuditLogDataTable } from './data-table';
@ -21,8 +22,6 @@ type AuditLogProps = {
};
export default async function AuditLog({ searchParams }: AuditLogProps) {
setupI18nSSR();
const { d } = searchParams;
if (typeof d !== 'string' || !d) {
@ -89,7 +88,9 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
<span className="font-medium">Created At</span>
<span className="mt-1 block">
<LocaleDate date={document.createdAt} format="yyyy-mm-dd hh:mm:ss a (ZZZZ)" />
{DateTime.fromJSDate(document.createdAt)
.setLocale(APP_I18N_OPTIONS.defaultLocale)
.toFormat('yyyy-mm-dd hh:mm:ss a (ZZZZ)')}
</span>
</p>
@ -97,7 +98,9 @@ export default async function AuditLog({ searchParams }: AuditLogProps) {
<span className="font-medium">Last Updated</span>
<span className="mt-1 block">
<LocaleDate date={document.updatedAt} format="yyyy-mm-dd hh:mm:ss a (ZZZZ)" />
{DateTime.fromJSDate(document.updatedAt)
.setLocale(APP_I18N_OPTIONS.defaultLocale)
.toFormat('yyyy-mm-dd hh:mm:ss a (ZZZZ)')}
</span>
</p>

45
apps/web/src/app/(internal)/%5F%5Fhtmltopdf/certificate/page.tsx
View File

@ -2,10 +2,11 @@ import React from 'react';
import { redirect } from 'next/navigation';
import { DateTime } from 'luxon';
import { match } from 'ts-pattern';
import { UAParser } from 'ua-parser-js';
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
import { APP_I18N_OPTIONS } from '@documenso/lib/constants/i18n';
import {
RECIPIENT_ROLES_DESCRIPTION_ENG,
RECIPIENT_ROLE_SIGNING_REASONS_ENG,
@ -27,7 +28,6 @@ import {
} from '@documenso/ui/primitives/table';
import { Logo } from '~/components/branding/logo';
import { LocaleDate } from '~/components/formatter/locale-date';
type SigningCertificateProps = {
searchParams: {
@ -41,8 +41,6 @@ const FRIENDLY_SIGNING_REASONS = {
};
export default async function SigningCertificate({ searchParams }: SigningCertificateProps) {
setupI18nSSR();
const { d } = searchParams;
if (typeof d !== 'string' || !d) {
@ -231,42 +229,33 @@ export default async function SigningCertificate({ searchParams }: SigningCertif
<p className="text-muted-foreground text-sm print:text-xs">
<span className="font-medium">Sent:</span>{' '}
<span className="inline-block">
{logs.EMAIL_SENT[0] ? (
<LocaleDate
date={logs.EMAIL_SENT[0].createdAt}
format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
/>
) : (
'Unknown'
)}
{logs.EMAIL_SENT[0]
? DateTime.fromJSDate(logs.EMAIL_SENT[0].createdAt)
.setLocale(APP_I18N_OPTIONS.defaultLocale)
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
: 'Unknown'}
</span>
</p>
<p className="text-muted-foreground text-sm print:text-xs">
<span className="font-medium">Viewed:</span>{' '}
<span className="inline-block">
{logs.DOCUMENT_OPENED[0] ? (
<LocaleDate
date={logs.DOCUMENT_OPENED[0].createdAt}
format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
/>
) : (
'Unknown'
)}
{logs.DOCUMENT_OPENED[0]
? DateTime.fromJSDate(logs.DOCUMENT_OPENED[0].createdAt)
.setLocale(APP_I18N_OPTIONS.defaultLocale)
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
: 'Unknown'}
</span>
</p>
<p className="text-muted-foreground text-sm print:text-xs">
<span className="font-medium">Signed:</span>{' '}
<span className="inline-block">
{logs.DOCUMENT_RECIPIENT_COMPLETED[0] ? (
<LocaleDate
date={logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt}
format="yyyy-MM-dd hh:mm:ss a (ZZZZ)"
/>
) : (
'Unknown'
)}
{logs.DOCUMENT_RECIPIENT_COMPLETED[0]
? DateTime.fromJSDate(logs.DOCUMENT_RECIPIENT_COMPLETED[0].createdAt)
.setLocale(APP_I18N_OPTIONS.defaultLocale)
.toFormat('yyyy-MM-dd hh:mm:ss a (ZZZZ)')
: 'Unknown'}
</span>
</p>

15
apps/web/src/app/(teams)/t/[teamUrl]/settings/tokens/page.tsx
View File

@ -12,7 +12,6 @@ import { getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
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';
type ApiTokensPageProps = {
@ -22,7 +21,7 @@ type ApiTokensPageProps = {
};
export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
setupI18nSSR();
const { i18n } = setupI18nSSR();
const { teamUrl } = params;
@ -98,13 +97,17 @@ export default async function ApiTokensPage({ params }: ApiTokensPageProps) {
<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">

8
apps/web/src/app/(teams)/t/[teamUrl]/settings/webhooks/page.tsx
View File

@ -16,11 +16,10 @@ 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';
import { useCurrentTeam } from '~/providers/team';
export default function WebhookPage() {
const { _ } = useLingui();
const { _, i18n } = useLingui();
const team = useCurrentTeam();
@ -91,10 +90,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>

61
apps/web/src/app/layout.tsx
View File

@ -1,7 +1,6 @@
import { Suspense } from 'react';
import { Caveat, Inter } from 'next/font/google';
import { cookies, headers } from 'next/headers';
import { AxiomWebVitals } from 'next-axiom';
import { PublicEnvScript } from 'next-runtime-env';
@ -9,12 +8,8 @@ import { PublicEnvScript } from 'next-runtime-env';
import { FeatureFlagProvider } from '@documenso/lib/client-only/providers/feature-flag';
import { I18nClientProvider } from '@documenso/lib/client-only/providers/i18n.client';
import { setupI18nSSR } from '@documenso/lib/client-only/providers/i18n.server';
import { LocaleProvider } from '@documenso/lib/client-only/providers/locale';
import { IS_APP_WEB_I18N_ENABLED, NEXT_PUBLIC_WEBAPP_URL } from '@documenso/lib/constants/app';
import type { SUPPORTED_LANGUAGE_CODES } from '@documenso/lib/constants/i18n';
import { ZSupportedLanguageCodeSchema } from '@documenso/lib/constants/i18n';
import { getServerComponentAllFlags } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
import { getLocale } from '@documenso/lib/server-only/headers/get-locale';
import { TrpcProvider } from '@documenso/trpc/react';
import { cn } from '@documenso/ui/lib/utils';
import { Toaster } from '@documenso/ui/primitives/toaster';
@ -61,32 +56,7 @@ export function generateMetadata() {
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const flags = await getServerComponentAllFlags();
const locale = getLocale();
let overrideLang: (typeof SUPPORTED_LANGUAGE_CODES)[number] | undefined;
// Should be safe to remove when we upgrade NextJS.
// https://github.com/vercel/next.js/pull/65008
// Currently if the middleware sets the cookie, it's not accessible in the cookies
// during the same render.
// So we go the roundabout way of checking the header for the set-cookie value.
if (!cookies().get('i18n')) {
const setCookieValue = headers().get('set-cookie');
const i18nCookie = setCookieValue?.split(';').find((cookie) => cookie.startsWith('i18n='));
if (i18nCookie) {
const i18n = i18nCookie.split('=')[1];
overrideLang = ZSupportedLanguageCodeSchema.parse(i18n);
}
}
// Disable i18n for now until we get translations.
if (!IS_APP_WEB_I18N_ENABLED) {
overrideLang = 'en';
}
const { lang, i18n } = setupI18nSSR(overrideLang);
const { i18n, lang, locales } = setupI18nSSR();
return (
<html
@ -110,21 +80,22 @@ export default async function RootLayout({ children }: { children: React.ReactNo
</Suspense>
<body>
<LocaleProvider locale={locale}>
<FeatureFlagProvider initialFlags={flags}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<TooltipProvider>
<TrpcProvider>
<I18nClientProvider initialLocale={lang} initialMessages={i18n.messages}>
{children}
</I18nClientProvider>
</TrpcProvider>
</TooltipProvider>
</ThemeProvider>
<FeatureFlagProvider initialFlags={flags}>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<TooltipProvider>
<TrpcProvider>
<I18nClientProvider
initialLocaleData={{ lang, locales }}
initialMessages={i18n.messages}
>
{children}
</I18nClientProvider>
</TrpcProvider>
</TooltipProvider>
</ThemeProvider>
<Toaster />
</FeatureFlagProvider>
</LocaleProvider>
<Toaster />
</FeatureFlagProvider>
</body>
</html>
);

6
apps/web/src/components/(teams)/tables/current-user-teams-data-table.tsx
View File

@ -22,12 +22,10 @@ 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';
import { LeaveTeamDialog } from '../dialogs/leave-team-dialog';
export const CurrentUserTeamsDataTable = () => {
const { _ } = useLingui();
const { _, i18n } = useLingui();
const searchParams = useSearchParams();
const updateSearchParams = useUpdateSearchParams();
@ -91,7 +89,7 @@ export const CurrentUserTeamsDataTable = () => {
{
header: _(msg`Member Since`),
accessorKey: 'createdAt',
cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
cell: ({ row }) => i18n.date(row.original.createdAt),
},
{
id: 'actions',

6
apps/web/src/components/(teams)/tables/pending-user-teams-data-table.tsx
View File

@ -18,13 +18,11 @@ 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';
import { CreateTeamCheckoutDialog } from '../dialogs/create-team-checkout-dialog';
import { PendingUserTeamsDataTableActions } from './pending-user-teams-data-table-actions';
export const PendingUserTeamsDataTable = () => {
const { _ } = useLingui();
const { _, i18n } = useLingui();
const searchParams = useSearchParams();
const updateSearchParams = useUpdateSearchParams();
@ -79,7 +77,7 @@ export const PendingUserTeamsDataTable = () => {
{
header: _(msg`Created on`),
accessorKey: 'createdAt',
cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
cell: ({ row }) => i18n.date(row.original.createdAt),
},
{
id: 'actions',

6
apps/web/src/components/(teams)/tables/team-member-invites-data-table.tsx
View File

@ -27,8 +27,6 @@ import { Skeleton } from '@documenso/ui/primitives/skeleton';
import { TableCell } from '@documenso/ui/primitives/table';
import { useToast } from '@documenso/ui/primitives/use-toast';
import { LocaleDate } from '~/components/formatter/locale-date';
export type TeamMemberInvitesDataTableProps = {
teamId: number;
};
@ -37,7 +35,7 @@ export const TeamMemberInvitesDataTable = ({ teamId }: TeamMemberInvitesDataTabl
const searchParams = useSearchParams();
const updateSearchParams = useUpdateSearchParams();
const { _ } = useLingui();
const { _, i18n } = useLingui();
const { toast } = useToast();
const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
@ -129,7 +127,7 @@ export const TeamMemberInvitesDataTable = ({ teamId }: TeamMemberInvitesDataTabl
{
header: _(msg`Invited At`),
accessorKey: 'createdAt',
cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
cell: ({ row }) => i18n.date(row.original.createdAt),
},
{
header: _(msg`Actions`),

6
apps/web/src/components/(teams)/tables/team-members-data-table.tsx
View File

@ -29,8 +29,6 @@ import {
import { Skeleton } from '@documenso/ui/primitives/skeleton';
import { TableCell } from '@documenso/ui/primitives/table';
import { LocaleDate } from '~/components/formatter/locale-date';
import { DeleteTeamMemberDialog } from '../dialogs/delete-team-member-dialog';
import { UpdateTeamMemberDialog } from '../dialogs/update-team-member-dialog';
@ -47,7 +45,7 @@ export const TeamMembersDataTable = ({
teamId,
teamName,
}: TeamMembersDataTableProps) => {
const { _ } = useLingui();
const { _, i18n } = useLingui();
const searchParams = useSearchParams();
const updateSearchParams = useUpdateSearchParams();
@ -114,7 +112,7 @@ export const TeamMembersDataTable = ({
{
header: _(msg`Member Since`),
accessorKey: 'createdAt',
cell: ({ row }) => <LocaleDate date={row.original.createdAt} />,
cell: ({ row }) => i18n.date(row.original.createdAt),
},
{
header: _(msg`Actions`),

10
apps/web/src/components/document/document-history-sheet.tsx
View File

@ -3,7 +3,9 @@
import { useMemo, useState } from 'react';
import { Trans } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { ArrowRightIcon, Loader } from 'lucide-react';
import { DateTime } from 'luxon';
import { match } from 'ts-pattern';
import { UAParser } from 'ua-parser-js';
@ -18,8 +20,6 @@ import { Badge } from '@documenso/ui/primitives/badge';
import { Button } from '@documenso/ui/primitives/button';
import { Sheet, SheetContent, SheetTrigger } from '@documenso/ui/primitives/sheet';
import { LocaleDate } from '~/components/formatter/locale-date';
import { DocumentHistorySheetChanges } from './document-history-sheet-changes';
export type DocumentHistorySheetProps = {
@ -37,6 +37,8 @@ export const DocumentHistorySheet = ({
onMenuOpenChange,
children,
}: DocumentHistorySheetProps) => {
const { i18n } = useLingui();
const [isUserDetailsVisible, setIsUserDetailsVisible] = useState(false);
const {
@ -153,7 +155,9 @@ export const DocumentHistorySheet = ({
{formatDocumentAuditLogActionString(auditLog, userId)}
</p>
<p className="text-foreground/50 text-xs">
<LocaleDate date={auditLog.createdAt} format="d MMM, yyyy HH:MM a" />
{DateTime.fromJSDate(auditLog.createdAt)
.setLocale(i18n.locales?.[0] || i18n.locale)
.toFormat('d MMM, yyyy HH:MM a')}
</p>
</div>
</div>

49
apps/web/src/components/formatter/locale-date.tsx
View File

@ -1,49 +0,0 @@
'use client';
import type { HTMLAttributes } from 'react';
import { useCallback, useEffect, useState } from 'react';
import type { DateTimeFormatOptions } from 'luxon';
import { DateTime } from 'luxon';
import { useLocale } from '@documenso/lib/client-only/providers/locale';
export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
date: string | number | Date;
format?: DateTimeFormatOptions | string;
};
/**
* Formats the date based on the user locale.
*
* Will use the estimated locale from the user headers on SSR, then will use
* the client browser locale once mounted.
*/
export const LocaleDate = ({ className, date, format, ...props }: LocaleDateProps) => {
const { locale } = useLocale();
const formatDateTime = useCallback(
(date: DateTime) => {
if (typeof format === 'string') {
return date.toFormat(format);
}
return date.toLocaleString(format);
},
[format],
);
const [localeDate, setLocaleDate] = useState(() =>
formatDateTime(DateTime.fromJSDate(new Date(date)).setLocale(locale)),
);
useEffect(() => {
setLocaleDate(formatDateTime(DateTime.fromJSDate(new Date(date))));
}, [date, format, formatDateTime]);
return (
<span className={className} {...props}>
{localeDate}
</span>
);
};

6
apps/web/src/components/templates/manage-public-template-dialog.tsx
View File

@ -52,8 +52,6 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
import { useOptionalCurrentTeam } from '~/providers/team';
import { LocaleDate } from '../formatter/locale-date';
export type ManagePublicTemplateDialogProps = {
directTemplates: (Template & {
directLink: Pick<TemplateDirectLink, 'token' | 'enabled'>;
@ -93,7 +91,7 @@ export const ManagePublicTemplateDialog = ({
onIsOpenChange,
...props
}: ManagePublicTemplateDialogProps) => {
const { _ } = useLingui();
const { _, i18n } = useLingui();
const { toast } = useToast();
const [open, onOpenChange] = useState(isOpen);
@ -300,7 +298,7 @@ export const ManagePublicTemplateDialog = ({
</TableCell>
<TableCell className="text-muted-foreground text-sm">
<LocaleDate date={row.createdAt} />
{i18n.date(row.createdAt)}
</TableCell>
<TableCell>

4
apps/web/src/middleware.ts
View File

@ -5,7 +5,7 @@ import { NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';
import { TEAM_URL_ROOT_REGEX } from '@documenso/lib/constants/teams';
import { extractSupportedLanguage } from '@documenso/lib/utils/i18n';
import { extractLocaleData } from '@documenso/lib/utils/i18n';
import { formatDocumentsPath } from '@documenso/lib/utils/teams';
async function middleware(req: NextRequest): Promise<NextResponse> {
@ -96,7 +96,7 @@ async function middleware(req: NextRequest): Promise<NextResponse> {
export default async function middlewareWrapper(req: NextRequest) {
const response = await middleware(req);
const lang = extractSupportedLanguage({
const { lang } = extractLocaleData({
headers: req.headers,
cookies: cookies(),
});