320 lines
10 KiB
TypeScript
320 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { UAParser } from 'ua-parser-js';
|
|
import { api } from '~/trpc/react';
|
|
import { Separator } from '@usesend/ui/src/separator';
|
|
import { EmailStatusBadge, EmailStatusIcon } from './email-status-badge';
|
|
import { formatDate } from 'date-fns';
|
|
import { motion } from 'framer-motion';
|
|
import { EmailStatus } from '@prisma/client';
|
|
import { JsonValue } from '@prisma/client/runtime/library';
|
|
import {
|
|
SesBounce,
|
|
SesClick,
|
|
SesComplaint,
|
|
SesDeliveryDelay,
|
|
SesOpen,
|
|
} from '~/types/aws-types';
|
|
import {
|
|
BOUNCE_ERROR_MESSAGES,
|
|
COMPLAINT_ERROR_MESSAGES,
|
|
DELIVERY_DELAY_ERRORS,
|
|
} from '~/lib/constants/ses-errors';
|
|
import CancelEmail from './cancel-email';
|
|
import { useEffect } from 'react';
|
|
import { useState } from 'react';
|
|
|
|
export default function EmailDetails({ emailId }: { emailId: string }) {
|
|
const emailQuery = api.email.getEmail.useQuery({ id: emailId });
|
|
|
|
return (
|
|
<div className="no-scrollbar h-full overflow-auto px-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<h1 className="font-bold">{emailQuery.data?.to}</h1>
|
|
<EmailStatusBadge status={emailQuery.data?.latestStatus ?? 'SENT'} />
|
|
</div>
|
|
</div>
|
|
<div className="mt-8 flex flex-col items-start gap-8">
|
|
<div className="flex w-full flex-col gap-2 rounded-lg border p-2 shadow">
|
|
{/* <div className="flex gap-2">
|
|
<span className="w-[100px] text-muted-foreground text-sm">
|
|
From
|
|
</span>
|
|
<span className="text-sm">{emailQuery.data?.from}</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex gap-2">
|
|
<span className="w-[100px] text-muted-foreground text-sm">To</span>
|
|
<span className="text-sm">{emailQuery.data?.to}</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex gap-2">
|
|
<span className="w-[100px] text-muted-foreground text-sm">
|
|
Subject
|
|
</span>
|
|
<span className="text-sm">{emailQuery.data?.subject}</span>
|
|
</div> */}
|
|
<div className="flex flex-col gap-1 px-4 py-1">
|
|
{/* <div className=" text-[15px] font-medium">
|
|
{emailQuery.data?.to}
|
|
</div> */}
|
|
<div className="text-sm">Subject: {emailQuery.data?.subject}</div>
|
|
<div className="text-muted-foreground text-xs">
|
|
From: {emailQuery.data?.from}
|
|
</div>
|
|
</div>
|
|
{emailQuery.data?.latestStatus === 'SCHEDULED' &&
|
|
emailQuery.data?.scheduledAt ? (
|
|
<>
|
|
<Separator />
|
|
<div className="flex items-center gap-2 px-4">
|
|
<span className="text-muted-foreground w-[100px] text-sm">
|
|
Scheduled at
|
|
</span>
|
|
<span className="text-sm">
|
|
{formatDate(
|
|
emailQuery.data?.scheduledAt,
|
|
"MMM dd'th', hh:mm a",
|
|
)}
|
|
</span>
|
|
<div className="ml-4">
|
|
<CancelEmail emailId={emailId} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : null}
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.2, delay: 0.3 }}
|
|
>
|
|
<EmailPreview html={emailQuery.data?.html ?? ''} />
|
|
</motion.div>
|
|
</div>
|
|
{emailQuery.data?.latestStatus !== 'SCHEDULED' ? (
|
|
<div className="mb-2 w-full rounded-lg border shadow">
|
|
<div className="flex w-full flex-col gap-8 p-4">
|
|
<div className="font-medium">Events History</div>
|
|
<div className="flex w-full items-stretch px-4">
|
|
<div className="border-r border-dashed border-gray-300 dark:border-gray-700" />
|
|
<div className="flex w-full flex-col gap-12">
|
|
{emailQuery.data?.emailEvents.map((evt) => (
|
|
<div
|
|
key={evt.status}
|
|
className="flex w-full items-start gap-5"
|
|
>
|
|
<div className="-ml-2.5">
|
|
<EmailStatusIcon status={evt.status} />
|
|
</div>
|
|
<div className="-mt-[0.125rem] w-full">
|
|
<div className="font-medium capitalize">
|
|
<EmailStatusBadge status={evt.status} />
|
|
</div>
|
|
<div className="text-muted-foreground mt-2 text-xs">
|
|
{formatDate(evt.createdAt, 'MMM dd, hh:mm a')}
|
|
</div>
|
|
<div className="text-foreground/80 mt-1">
|
|
<EmailStatusText
|
|
status={evt.status}
|
|
data={evt.data}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const EmailPreview = ({ html }: { html: string }) => {
|
|
const [show, setShow] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setShow(true);
|
|
}, 200);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
if (!show) {
|
|
return (
|
|
<div className="h-[350px] overflow-visible rounded border-t dark:bg-slate-200"></div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-[350px] overflow-visible rounded border-t dark:bg-slate-200">
|
|
<iframe
|
|
className="h-full w-full"
|
|
srcDoc={html}
|
|
sandbox="allow-same-origin"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const EmailStatusText = ({
|
|
status,
|
|
data,
|
|
}: {
|
|
status: EmailStatus;
|
|
data: JsonValue;
|
|
}) => {
|
|
if (status === 'SENT') {
|
|
return (
|
|
<div>
|
|
We received your request and sent the email to recipient's server.
|
|
</div>
|
|
);
|
|
} else if (status === 'DELIVERED') {
|
|
return <div>Mail is successfully delivered to the recipient.</div>;
|
|
} else if (status === 'DELIVERY_DELAYED') {
|
|
const _errorData = data as unknown as SesDeliveryDelay;
|
|
const errorMessage = DELIVERY_DELAY_ERRORS[_errorData.delayType];
|
|
|
|
return <div>{errorMessage}</div>;
|
|
} else if (status === 'BOUNCED') {
|
|
const _errorData = data as unknown as SesBounce;
|
|
_errorData.bounceType;
|
|
|
|
return (
|
|
<div className="flex w-full flex-col gap-4">
|
|
<p>{getErrorMessage(_errorData)}</p>
|
|
<div className="bg-muted/30 flex flex-col gap-4 rounded-xl p-4">
|
|
<div className="flex w-full gap-2">
|
|
<div className="w-1/2">
|
|
<p className="text-muted-foreground text-sm">Type</p>
|
|
<p>{_errorData.bounceType}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-sm">Sub Type</p>
|
|
<p>{_errorData.bounceSubType}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-muted-foreground text-sm">SMTP response</p>
|
|
<p>{_errorData.bouncedRecipients[0]?.diagnosticCode}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} else if (status === 'FAILED') {
|
|
const _errorData = data as unknown as { error: string };
|
|
return <div>{_errorData.error}</div>;
|
|
} else if (status === 'OPENED') {
|
|
const _data = data as unknown as SesOpen;
|
|
const userAgent = getUserAgent(_data.userAgent);
|
|
|
|
return (
|
|
<div className="bg-muted/30 mt-4 w-full rounded-xl p-4">
|
|
<div className="flex w-full">
|
|
{userAgent.os.name ? (
|
|
<div className="w-1/2">
|
|
<p className="text-muted-foreground text-sm">OS</p>
|
|
<p>{userAgent.os.name}</p>
|
|
</div>
|
|
) : null}
|
|
{userAgent.browser.name ? (
|
|
<div>
|
|
<p className="text-muted-foreground text-sm">Browser</p>
|
|
<p>{userAgent.browser.name}</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
} else if (status === 'CLICKED') {
|
|
const _data = data as unknown as SesClick;
|
|
const userAgent = getUserAgent(_data.userAgent);
|
|
|
|
return (
|
|
<div className="bg-muted/30 mt-4 flex w-full flex-col gap-4 rounded-xl p-4">
|
|
<div className="flex w-full">
|
|
{userAgent.os.name ? (
|
|
<div className="w-1/2">
|
|
<p className="text-muted-foreground text-sm">OS </p>
|
|
<p>{userAgent.os.name}</p>
|
|
</div>
|
|
) : null}
|
|
{userAgent.browser.name ? (
|
|
<div>
|
|
<p className="text-muted-foreground text-sm">Browser </p>
|
|
<p>{userAgent.browser.name}</p>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="w-full">
|
|
<p className="text-muted-foreground text-sm">URL</p>
|
|
<p>{_data.link}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} else if (status === 'COMPLAINED') {
|
|
const _errorData = data as unknown as SesComplaint;
|
|
|
|
return (
|
|
<div className="flex w-full flex-col gap-4">
|
|
<p>{getComplaintMessage(_errorData.complaintFeedbackType)}</p>
|
|
</div>
|
|
);
|
|
} else if (status === 'CANCELLED') {
|
|
return <div>This scheduled email was cancelled</div>;
|
|
} else if (status === 'SUPPRESSED') {
|
|
return (
|
|
<div>
|
|
This email was suppressed because this email is previously either
|
|
bounced or the recipient complained.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <div className="w-full">{status}</div>;
|
|
};
|
|
|
|
const getErrorMessage = (data: SesBounce) => {
|
|
if (data.bounceType === 'Permanent') {
|
|
return BOUNCE_ERROR_MESSAGES[data.bounceType][
|
|
data.bounceSubType as
|
|
| 'General'
|
|
| 'NoEmail'
|
|
| 'Suppressed'
|
|
| 'OnAccountSuppressionList'
|
|
];
|
|
} else if (data.bounceType === 'Transient') {
|
|
return BOUNCE_ERROR_MESSAGES[data.bounceType][
|
|
data.bounceSubType as
|
|
| 'General'
|
|
| 'MailboxFull'
|
|
| 'MessageTooLarge'
|
|
| 'ContentRejected'
|
|
| 'AttachmentRejected'
|
|
];
|
|
} else if (data.bounceType === 'Undetermined') {
|
|
return BOUNCE_ERROR_MESSAGES.Undetermined;
|
|
}
|
|
};
|
|
|
|
const getComplaintMessage = (errorType: string) => {
|
|
return COMPLAINT_ERROR_MESSAGES[
|
|
errorType as keyof typeof COMPLAINT_ERROR_MESSAGES
|
|
];
|
|
};
|
|
|
|
const getUserAgent = (userAgent: string) => {
|
|
const parser = new UAParser(userAgent);
|
|
return {
|
|
browser: parser.getBrowser(),
|
|
os: parser.getOS(),
|
|
device: parser.getDevice(),
|
|
};
|
|
};
|