diff --git a/.changeset/major-hats-behave.md b/.changeset/major-hats-behave.md new file mode 100644 index 0000000000..406e74949c --- /dev/null +++ b/.changeset/major-hats-behave.md @@ -0,0 +1,5 @@ +--- +"@react-email/preview-server": patch +--- + +add better feedback for when test sending is rate limited diff --git a/packages/preview-server/src/actions/send-test-email.ts b/packages/preview-server/src/actions/send-test-email.ts new file mode 100644 index 0000000000..69931e04ce --- /dev/null +++ b/packages/preview-server/src/actions/send-test-email.ts @@ -0,0 +1,19 @@ +'use server'; + +export async function sendTestEmail( + to: string, + subject: string, + html: string, +): Promise<{ ok: boolean; status: number }> { + const response = await fetch('https://react.email/api/send/test', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + to, + subject, + html, + }), + }); + + return { ok: response.ok, status: response.status }; +} diff --git a/packages/preview-server/src/components/send.tsx b/packages/preview-server/src/components/send.tsx index f4a642c03c..14981731e9 100644 --- a/packages/preview-server/src/components/send.tsx +++ b/packages/preview-server/src/components/send.tsx @@ -1,49 +1,35 @@ import * as Popover from '@radix-ui/react-popover'; -import * as React from 'react'; +import { useId, useState } from 'react'; import { toast } from 'sonner'; +import { sendTestEmail } from '../actions/send-test-email'; import { Button } from './button'; import { Text } from './text'; export const Send = ({ markup }: { markup: string }) => { - const [to, setTo] = React.useState(''); - const [subject, setSubject] = React.useState('Testing React Email'); - const [isSending, setIsSending] = React.useState(false); - const [isPopOverOpen, setIsPopOverOpen] = React.useState(false); + const [to, setTo] = useState(''); + const [subject, setSubject] = useState('Testing React Email'); + const [isSending, setIsSending] = useState(false); + const [isPopOverOpen, setIsPopOverOpen] = useState(false); const onFormSubmit = async (e: React.FormEvent) => { - try { - e.preventDefault(); - setIsSending(true); + e.preventDefault(); + setIsSending(true); - const response = await fetch('https://react.email/api/send/test', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - to, - subject, - html: markup, - }), - }); + const response = await sendTestEmail(to, subject, markup); - if (response.ok) { - toast.success('Email sent! Check your inbox.'); - } else { - if (response.status === 429) { - const { error } = (await response.json()) as { error: string }; - toast.error(error); - } else { - toast.error('Something went wrong. Please try again.'); - } - } - } catch (_exception) { + if (response.ok) { + toast.success('Email sent! Check your inbox.'); + } else if (response.status === 429) { + toast.error('Too many requests. Try again in around 1 minute'); + } else { toast.error('Something went wrong. Please try again.'); - } finally { - setIsSending(false); } + + setIsSending(false); }; - const toId = React.useId(); - const subjectId = React.useId(); + const toId = useId(); + const subjectId = useId(); return ( { type="checkbox" />
- - Powered by{' '} - - Resend - - +
+ + Powered by{' '} + + Resend + + +