73 lines
3.3 KiB
TypeScript
73 lines
3.3 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import CheckIcon from "~/components/ui/icons/CheckIcon";
|
|
import XIcon from "~/components/ui/icons/XIcon";
|
|
import ShowPayloadModalButton from "~/components/ui/json/ShowPayloadModalButton";
|
|
import TableSimple from "~/components/ui/tables/TableSimple";
|
|
import { redactDiagnosticJsonString } from "~/utils/redaction";
|
|
import { useLocaleFormatters } from "~/locale/format";
|
|
import type { IGetMessagesData } from "../services/.server/NotificationService";
|
|
|
|
export function sanitizeNotificationPayloadForDisplay(payload: unknown) {
|
|
const value = typeof payload === "string" ? payload : JSON.stringify(payload ?? null);
|
|
return redactDiagnosticJsonString(value);
|
|
}
|
|
|
|
export default function NotificationMessagesTable({ items, withPagination = true }: { items: IGetMessagesData | null; withPagination?: boolean }) {
|
|
const { t } = useTranslation();
|
|
const formatters = useLocaleFormatters();
|
|
const channelLabel = (channel: string) =>
|
|
t(`notifications.center.channels.${channel.toLowerCase().replace(/[-\s]/g, "_")}`, { defaultValue: t("notifications.center.channels.unknown") });
|
|
const templateLabel = (templateIdentifier: string) =>
|
|
t(`notifications.admin.messageTemplates.${templateIdentifier}`, { defaultValue: t("notifications.admin.messages.unknownTemplate") });
|
|
|
|
return (
|
|
<TableSimple
|
|
items={items?.data ?? []}
|
|
pagination={
|
|
!withPagination
|
|
? undefined
|
|
: {
|
|
page: (items?.page ?? 0) + 1,
|
|
pageSize: items?.pageSize ?? 0,
|
|
totalItems: items?.totalCount ?? 0,
|
|
totalPages: Math.ceil((items?.totalCount ?? 0) / (items?.pageSize ?? 0)),
|
|
}
|
|
}
|
|
headers={[
|
|
{
|
|
name: "createdAt",
|
|
title: t("notifications.admin.messages.createdAt"),
|
|
value: (i) => (
|
|
<div className="flex flex-col">
|
|
<div>{formatters.date(i.createdAt, { dateStyle: "medium" })}</div>
|
|
<div className="text-xs">{formatters.relativeDate(i.createdAt)}</div>
|
|
</div>
|
|
),
|
|
},
|
|
{ name: "templateIdentifier", title: t("notifications.admin.messages.template"), value: (i) => templateLabel(i.templateIdentifier) },
|
|
{ name: "channel", title: t("notifications.admin.messages.channel"), value: (i) => channelLabel(i.channel) },
|
|
{
|
|
name: "seen",
|
|
title: t("notifications.admin.messages.seen"),
|
|
value: (i) => <div>{i.seen ? <CheckIcon className="text-theme-500 h-4 w-4" /> : <XIcon className="text-muted-foreground h-4 w-4" />}</div>,
|
|
},
|
|
{
|
|
name: "read",
|
|
title: t("notifications.admin.messages.read"),
|
|
value: (i) => <div>{i.read ? <CheckIcon className="text-theme-500 h-4 w-4" /> : <XIcon className="text-muted-foreground h-4 w-4" />}</div>,
|
|
},
|
|
{
|
|
name: "payload",
|
|
title: t("notifications.admin.messages.payload"),
|
|
value: (i) => (
|
|
<pre className="max-w-sm truncate">
|
|
<ShowPayloadModalButton payload={sanitizeNotificationPayloadForDisplay(i.payload)} />
|
|
</pre>
|
|
),
|
|
},
|
|
{ name: "provider", title: t("notifications.admin.messages.provider"), value: () => t("notifications.admin.provider.novu") },
|
|
]}
|
|
></TableSimple>
|
|
);
|
|
}
|