import * as React from "react"; import { Body, Button, Container, Head, Heading, Hr, Html, Link, Preview, Section, Text } from "@react-email/components"; const colors = { bg: "#f6f7f9", card: "#ffffff", text: "#0b0f19", muted: "#5b6472", accent: "#0f62fe", border: "#e5e8ec", }; const font = "-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; function Layout({ preview, children, siteUrl }: { preview: string; children: React.ReactNode; siteUrl: string }) { return ( {preview}

fetcha

{children}

Fetcha — Intelligent Web Access Infrastructure. You received this email because an account on{" "} fetcha.co {" "} uses this address. Questions? support@fetcha.co ); } const h1: React.CSSProperties = { fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", color: colors.text, margin: "0 0 12px" }; const p: React.CSSProperties = { fontSize: 15, lineHeight: "24px", color: colors.text, margin: "0 0 16px" }; const small: React.CSSProperties = { fontSize: 13, lineHeight: "20px", color: colors.muted, margin: "16px 0 0" }; const btn: React.CSSProperties = { backgroundColor: colors.accent, color: "#fff", fontSize: 14, fontWeight: 600, padding: "12px 20px", borderRadius: 6, textDecoration: "none", display: "inline-block" }; const code: React.CSSProperties = { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 13, backgroundColor: "#f1f3f6", padding: "2px 6px", borderRadius: 4 }; export function VerificationEmail({ url, siteUrl }: { url: string; siteUrl: string }) { return ( Confirm your email Welcome to Fetcha. Click the button below to verify your email address and unlock production API access. This link expires in 24 hours. If the button does not work, paste this URL in your browser:
{url} If you did not create a Fetcha account, you can safely ignore this email. ); } export function WelcomeEmail({ name, dashboardUrl, docsUrl, siteUrl }: { name: string; dashboardUrl: string; docsUrl: string; siteUrl: string }) { return ( Welcome to Fetcha{name ? `, ${name}` : ""} Your email is verified and your account is ready. Here is the fastest path to your first request: 1. Create a project and an API key in the dashboard.
2. Open the Playground, enter a URL, run it.
3. Copy the generated code for cURL, Python or JavaScript. Documentation lives at{" "} {docsUrl} . Fetcha is a private platform: unlimited requests, no plans, no meters. ); } export function InviteEmail({ inviterName, signupUrl, siteUrl }: { inviterName: string; signupUrl: string; siteUrl: string }) { const by = inviterName.trim(); return ( You have been invited to Fetcha {by ? <>{by} has added your email address to the Fetcha access list. : <>Your email address was added to the Fetcha access list.} Fetcha is a private, invitation-only platform: one API to reach any web page through managed proxy networks, a headless browser and crawl jobs, with no plans and no meters. Create your account with this same email address to get started. Your workspace, a default project and the Playground are ready as soon as you sign up. If the button does not work, paste this URL in your browser:
{signupUrl} If you were not expecting this invitation, you can safely ignore this email — no account is created until you sign up. ); } export function PasswordResetEmail({ url, siteUrl }: { url: string; siteUrl: string }) { return ( Reset your password We received a request to reset the password of your Fetcha account. This link is valid for one hour. If you did not request a reset, ignore this email — your password will not change. ); } export function EmailChangedEmail({ oldEmail, newEmail, siteUrl }: { oldEmail: string; newEmail: string; siteUrl: string }) { return ( Email address changed The email on your Fetcha account was changed from {oldEmail} to {newEmail}. If you did not make this change, contact support@fetcha.co immediately. ); } export function EmailChangeApprovalEmail({ url, newEmail, siteUrl }: { url: string; newEmail: string; siteUrl: string }) { return ( Approve email change A request was made to change your Fetcha account email to {newEmail}. Confirm below to proceed. If you did not request this, ignore this email and consider changing your password. ); } export function ApiKeyCreatedEmail({ keyName, prefix, projectName, when, siteUrl, dashboardUrl }: { keyName: string; prefix: string; projectName: string; when: string; siteUrl: string; dashboardUrl: string }) { return ( New API key created The key {keyName} ({prefix}…) was created in project {projectName} on {when}. If you did not create this key, revoke it now from the dashboard and rotate your other keys. ); } export function ApiKeyRevokedEmail({ keyName, prefix, siteUrl }: { keyName: string; prefix: string; siteUrl: string }) { return ( API key revoked The key {keyName} ({prefix}…) was revoked. Requests using it now fail with INVALID_API_KEY. ); } export function NewLoginEmail({ ip, userAgent, when, siteUrl, securityUrl }: { ip: string; userAgent: string; when: string; siteUrl: string; securityUrl: string }) { return ( New sign-in detected Your account was accessed on {when} from IP {ip}.
Device: {userAgent} If this was not you, revoke the session and change your password right away. ); } export function UsageAlertEmail({ projectName, spent, limit, kind, siteUrl, usageUrl }: { projectName: string; spent: string; limit: string; kind: "soft" | "hard"; siteUrl: string; usageUrl: string }) { return ( {kind === "hard" ? "Spending limit reached — requests paused" : "Spending alert"} Project {projectName} has spent {spent} this month against a {kind} limit of {limit}. {kind === "hard" ? " Further requests return USAGE_LIMIT_REACHED until the limit is raised or the month rolls over." : ""} ); } export function AccountDeletionEmail({ url, siteUrl }: { url: string; siteUrl: string }) { return ( Confirm account deletion You asked to delete your Fetcha account. Confirm below. After confirmation your account enters a 7-day grace period before data is deleted or anonymized. Invoices are retained as required by law. If you did not request this, ignore this email. ); } export function BillingEmail({ title, body, siteUrl, billingUrl }: { title: string; body: string; siteUrl: string; billingUrl: string }) { return ( {title} {body} ); }