User Created Email
This commit is contained in:
parent
8a840152e4
commit
bd8231912c
5 changed files with 72 additions and 93 deletions
|
|
@ -1,52 +0,0 @@
|
|||
import {
|
||||
Body,
|
||||
Container,
|
||||
Head,
|
||||
Heading,
|
||||
Hr,
|
||||
Html,
|
||||
Img,
|
||||
Preview,
|
||||
Section,
|
||||
Tailwind,
|
||||
Text,
|
||||
} from "@react-email/components";
|
||||
import * as React from "react";
|
||||
|
||||
interface GoodbyeTemplateProps {
|
||||
name: string;
|
||||
}
|
||||
|
||||
const baseUrl = process.env.VERCEL_URL
|
||||
? `https://${process.env.VERCEL_URL}`
|
||||
: "http://localhost:3000";
|
||||
|
||||
export const Goodbye = ({ name }: GoodbyeTemplateProps) => (
|
||||
<Html>
|
||||
<Head />
|
||||
<Preview>Sorry to see you go... 😭</Preview>
|
||||
<Tailwind>
|
||||
<Body className="bg-white my-auto mx-auto font-sans">
|
||||
<Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
|
||||
<Section className="mt-[32px]">
|
||||
<Img
|
||||
src={`${baseUrl}/logo.webp`}
|
||||
width="40"
|
||||
height="37"
|
||||
alt={`Sprint Padawan Logo`}
|
||||
className="my-0 mx-auto"
|
||||
/>
|
||||
</Section>
|
||||
<Heading className="text-4xl">Farewell, {name}...</Heading>
|
||||
<Text>{"Were sorry to see you go."}</Text>
|
||||
<Text>
|
||||
Your data has been deleted, including all room history, user data,
|
||||
votes, etc.
|
||||
</Text>
|
||||
<Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
|
||||
<Text>— The Sprint Padawan team</Text>
|
||||
</Container>
|
||||
</Body>
|
||||
</Tailwind>
|
||||
</Html>
|
||||
);
|
||||
|
|
@ -8,7 +8,7 @@ import {
|
|||
Img,
|
||||
Preview,
|
||||
Section,
|
||||
Tailwind,
|
||||
// Tailwind,
|
||||
Text,
|
||||
} from "@react-email/components";
|
||||
import * as React from "react";
|
||||
|
|
@ -25,33 +25,33 @@ export const Welcome = ({ name }: WelcomeTemplateProps) => (
|
|||
<Html>
|
||||
<Head />
|
||||
<Preview>🎉 Welcome to Sprint Padawan! 🎉</Preview>
|
||||
<Tailwind>
|
||||
<Body className="bg-white my-auto mx-auto font-sans">
|
||||
<Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
|
||||
<Section className="mt-[32px]">
|
||||
<Img
|
||||
src={`${baseUrl}/logo.webp`}
|
||||
width="40"
|
||||
height="37"
|
||||
alt={`Sprint Padawan Logo`}
|
||||
className="my-0 mx-auto"
|
||||
/>
|
||||
</Section>
|
||||
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
|
||||
🎉 Welcome to Sprint Padawan, <strong>{name}</strong>! 🎉
|
||||
</Heading>
|
||||
<Text className="text-black text-[14px] leading-[24px]">
|
||||
Hello {name},
|
||||
</Text>
|
||||
<Text>Thank you for signing up for Sprint Padawan!</Text>
|
||||
<Text>
|
||||
If at any point you encounter issues, please let me know at
|
||||
support@sprintpadawan.dev.
|
||||
</Text>
|
||||
<Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
|
||||
<Text>— The Sprint Padawan team</Text>
|
||||
</Container>
|
||||
</Body>
|
||||
</Tailwind>
|
||||
{/* <Tailwind> */}
|
||||
<Body className="bg-white my-auto mx-auto font-sans">
|
||||
<Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
|
||||
<Section className="mt-[32px]">
|
||||
<Img
|
||||
src={`${baseUrl}/logo.webp`}
|
||||
width="40"
|
||||
height="37"
|
||||
alt={`Sprint Padawan Logo`}
|
||||
className="my-0 mx-auto"
|
||||
/>
|
||||
</Section>
|
||||
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
|
||||
🎉 Welcome to Sprint Padawan, <strong>{name}</strong>! 🎉
|
||||
</Heading>
|
||||
<Text className="text-black text-[14px] leading-[24px]">
|
||||
Hello {name},
|
||||
</Text>
|
||||
<Text>Thank you for signing up for Sprint Padawan!</Text>
|
||||
<Text>
|
||||
If at any point you encounter issues, please let me know at
|
||||
support@sprintpadawan.dev.
|
||||
</Text>
|
||||
<Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
|
||||
<Text>— The Sprint Padawan team</Text>
|
||||
</Container>
|
||||
</Body>
|
||||
{/* </Tailwind> */}
|
||||
</Html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@ import {
|
|||
onUserCreatedHandler,
|
||||
onUserDeletedHandler,
|
||||
} from "~/server/webhookHelpers";
|
||||
import { WebhookEventBodySchema, WebhookEvents } from "~/utils/types";
|
||||
import {
|
||||
WebhookEventBody,
|
||||
WebhookEventBodySchema,
|
||||
WebhookEvents,
|
||||
} from "~/utils/types";
|
||||
|
||||
export const config = {
|
||||
runtime: "edge",
|
||||
|
|
@ -12,12 +16,17 @@ export const config = {
|
|||
|
||||
export default async function handler(req: NextRequest) {
|
||||
try {
|
||||
const requestBody = WebhookEventBodySchema.parse(await req.json());
|
||||
const eventBody = (await req.json()) as WebhookEventBody;
|
||||
const { data, type } = WebhookEventBodySchema.parse(eventBody);
|
||||
let success = false;
|
||||
|
||||
switch (requestBody.type) {
|
||||
switch (type) {
|
||||
case WebhookEvents.USER_CREATED:
|
||||
success = await onUserCreatedHandler(requestBody.data.id);
|
||||
success = await onUserCreatedHandler(
|
||||
data.id,
|
||||
`${data.first_name} ${data.last_name}`,
|
||||
data.email_addresses?.map((email) => email.email_address) || []
|
||||
);
|
||||
if (success) {
|
||||
return NextResponse.json(
|
||||
{ result: "USER CREATED" },
|
||||
|
|
@ -31,7 +40,7 @@ export default async function handler(req: NextRequest) {
|
|||
}
|
||||
|
||||
case WebhookEvents.USER_DELETED:
|
||||
success = await onUserDeletedHandler(requestBody.data.id);
|
||||
success = await onUserDeletedHandler(data.id);
|
||||
|
||||
return NextResponse.json(
|
||||
{ result: "USER DELETED" },
|
||||
|
|
@ -44,7 +53,8 @@ export default async function handler(req: NextRequest) {
|
|||
{ status: 400, statusText: "INVALID WEBHOOK EVENT TYPE" }
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return NextResponse.json(
|
||||
{ result: "INVALID WEBHOOK EVENT BODY" },
|
||||
{ status: 400, statusText: "INVALID WEBHOOK EVENT BODY" }
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ import { eq } from "drizzle-orm";
|
|||
import { db } from "./db";
|
||||
import { rooms } from "./schema";
|
||||
import { env } from "~/env.mjs";
|
||||
import { Welcome } from "~/components/templates/Welcome";
|
||||
import { Resend } from "resend";
|
||||
|
||||
const resend = new Resend(env.RESEND_API_KEY);
|
||||
|
||||
export const onUserDeletedHandler = async (userId: string) => {
|
||||
try {
|
||||
|
|
@ -13,7 +17,11 @@ export const onUserDeletedHandler = async (userId: string) => {
|
|||
}
|
||||
};
|
||||
|
||||
export const onUserCreatedHandler = async (userId: string) => {
|
||||
export const onUserCreatedHandler = async (
|
||||
userId: string,
|
||||
userName: string,
|
||||
userEmails: string[]
|
||||
) => {
|
||||
const userUpdateResponse = await fetch(
|
||||
`https://api.clerk.com/v1/users/${userId}/metadata`,
|
||||
{
|
||||
|
|
@ -33,5 +41,14 @@ export const onUserCreatedHandler = async (userId: string) => {
|
|||
}
|
||||
);
|
||||
|
||||
userEmails.forEach((userEmail) => {
|
||||
void resend.sendEmail({
|
||||
from: "no-reply@sprintpadawan.dev",
|
||||
to: userEmail,
|
||||
subject: "🎉 Welcome to Sprint Padawan! 🎉",
|
||||
react: Welcome({ name: userName }),
|
||||
});
|
||||
});
|
||||
|
||||
return userUpdateResponse.ok;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -23,14 +23,18 @@ export const WebhookEventBodySchema = z.object({
|
|||
.array(
|
||||
z.object({
|
||||
email_address: z.string().email(),
|
||||
id: z.string(),
|
||||
verification: z.object({
|
||||
status: z.string(),
|
||||
strategy: z.string(),
|
||||
}),
|
||||
id: z.string().optional(),
|
||||
verification: z
|
||||
.object({
|
||||
status: z.string().optional(),
|
||||
strategy: z.string().optional(),
|
||||
})
|
||||
.optional(),
|
||||
})
|
||||
)
|
||||
.optional(),
|
||||
first_name: z.string().optional(),
|
||||
last_name: z.string().optional(),
|
||||
}),
|
||||
type: z.string(),
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue