diff --git a/packages/emails/emails/connect-integration.tsx b/packages/emails/emails/connect-integration.tsx new file mode 100644 index 000000000..0e0cf495a --- /dev/null +++ b/packages/emails/emails/connect-integration.tsx @@ -0,0 +1,132 @@ +import { Button } from "@react-email/button"; +import { Head } from "@react-email/head"; +import { Hr } from "@react-email/hr"; +import { Html } from "@react-email/html"; +import { Link } from "@react-email/link"; +import { Preview } from "@react-email/preview"; +import { Section } from "@react-email/section"; +import { Text } from "@react-email/text"; +import * as React from "react"; + +export default function Email({ + name, + integration, + workflowId, +}: { + name?: string; + workflowId: string; + integration: string; +}) { + return ( + + + You need to connect your workflow! +
+ Hey {name ?? "there"}, + + + Your workflow {workflowId ?? "WORKFLOWID"} can’t run because it + requires {integration ?? "INTEGRATION"} to be connected. + + + + To get back up and running click the button below. + + + + + — Trigger.dev team + +
+ + + Trigger.dev + + . ©API Hero Ltd, 3rd Floor, 1 Ashley Road, Altrincham, Cheshire, WA14 + 2DT + +
+ + ); +} + +const main = { + backgroundColor: "#ffffff", +}; + +const btn = { + backgroundColor: "#3B31C3", + borderRadius: "5px", + color: "#fff", + fontFamily: + "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", + fontSize: "14px", + fontWeight: 500, + lineHeight: "50px", + textDecoration: "none", + textAlign: "center" as const, +}; + +const container = { + backgroundColor: "#ffffff", + margin: "0 auto", + padding: "20px 0 48px", + marginBottom: "64px", +}; + +const box = { + padding: "0 48px", +}; + +const hr = { + borderColor: "#e6ebf1", + margin: "20px 0", +}; + +const paragraph = { + color: "#333", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', + fontSize: "16px", + lineHeight: "24px", + textAlign: "left" as const, +}; + +const bullets = { + color: "#333", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', + fontSize: "16px", + lineHeight: "24px", + textAlign: "left" as const, + margin: "0", +}; + +const anchor = { + color: "#556cd6", + textDecoration: "underline", +}; + +const button = { + backgroundColor: "#656ee8", + borderRadius: "5px", + color: "#fff", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', + fontSize: "16px", + fontWeight: "bold", + textDecoration: "none", + textAlign: "center" as const, + display: "block", + width: "100%", +}; + +const footer = { + color: "#8898aa", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', + fontSize: "12px", + lineHeight: "16px", +};