@intelligo-dev/core 1.0.0-beta.1 → 1.0.0-beta.14

package/src/email/senders.ts

@@ -0,0 +1,292 @@
+/**
+ * Typed wrappers that render a React Email template and send it. They never
+ * throw; each returns a SendEmailResult.
+ *
+ * Every sender attaches a stable `template` key and flat variables so
+ * template-based providers (Loops) can send the same email; HTML providers
+ * ignore it. Boolean variants use distinct keys (quota-warning /
+ * quota-exceeded, trial-warning / trial-depleted) because template providers
+ * branch per template, not per variable.
+ */
+
+import * as React from "react";
+import { emailBrand } from "./brand";
+import { sendEmail, type SendEmailResult } from "./send";
+import { formatMoney, type Money } from "../money";
+import {
+  WelcomeEmail,
+  VerifyEmailEmail,
+  PasswordResetEmail,
+  WorkspaceInvitationEmail,
+  QuotaWarningEmail,
+  TrialWarningEmail,
+  TrialExpiryEmail,
+  PaymentFailedEmail,
+  SubscriptionConfirmedEmail,
+} from "./templates";
+
+/** The locale the email copy is written in; amounts are formatted to match. */
+const EMAIL_LOCALE = "en";
+
+export async function sendWelcomeEmail(params: {
+  to: string;
+  userName: string;
+  dashboardUrl: string;
+}): Promise<SendEmailResult> {
+  return sendEmail({
+    to: params.to,
+    subject: emailBrand().name
+      ? `Welcome to ${emailBrand().name}!`
+      : "Welcome!",
+    react: React.createElement(WelcomeEmail, {
+      userName: params.userName,
+      dashboardUrl: params.dashboardUrl,
+    }),
+    template: {
+      key: "welcome",
+      variables: {
+        userName: params.userName,
+        dashboardUrl: params.dashboardUrl,
+      },
+    },
+  });
+}
+
+export async function sendVerifyEmail(params: {
+  to: string;
+  userName: string;
+  verificationUrl: string;
+}): Promise<SendEmailResult> {
+  return sendEmail({
+    to: params.to,
+    subject: "Verify your email address",
+    react: React.createElement(VerifyEmailEmail, {
+      userName: params.userName,
+      verificationUrl: params.verificationUrl,
+    }),
+    template: {
+      key: "verify-email",
+      variables: {
+        userName: params.userName,
+        verificationUrl: params.verificationUrl,
+      },
+    },
+  });
+}
+
+export async function sendPasswordResetEmail(params: {
+  to: string;
+  userName: string;
+  resetUrl: string;
+}): Promise<SendEmailResult> {
+  return sendEmail({
+    to: params.to,
+    subject: "Reset your password",
+    react: React.createElement(PasswordResetEmail, {
+      userName: params.userName,
+      resetUrl: params.resetUrl,
+    }),
+    template: {
+      key: "password-reset",
+      variables: {
+        userName: params.userName,
+        resetUrl: params.resetUrl,
+      },
+    },
+  });
+}
+
+export async function sendInvitationEmail(params: {
+  to: string;
+  inviterName: string;
+  workspaceName: string;
+  role: string;
+  acceptUrl: string;
+  declineUrl: string;
+}): Promise<SendEmailResult> {
+  return sendEmail({
+    to: params.to,
+    subject: `${params.inviterName} invited you to ${params.workspaceName}`,
+    react: React.createElement(WorkspaceInvitationEmail, {
+      inviterName: params.inviterName,
+      workspaceName: params.workspaceName,
+      role: params.role,
+      acceptUrl: params.acceptUrl,
+      declineUrl: params.declineUrl,
+    }),
+    template: {
+      key: "workspace-invitation",
+      variables: {
+        inviterName: params.inviterName,
+        workspaceName: params.workspaceName,
+        role: params.role,
+        acceptUrl: params.acceptUrl,
+        declineUrl: params.declineUrl,
+      },
+    },
+  });
+}
+
+/**
+ * Send the allowance warning or used-up email. `used` and `allowance`
+ * are money in the deployment's billing currency; the template and the
+ * provider variables receive them formatted.
+ */
+export async function sendQuotaWarningEmail(params: {
+  to: string;
+  workspaceName: string;
+  percentageUsed: number;
+  used: Money;
+  allowance: Money;
+  upgradeUrl: string;
+  isExceeded: boolean;
+}): Promise<SendEmailResult> {
+  const used = formatMoney(params.used, EMAIL_LOCALE);
+  const allowance = formatMoney(params.allowance, EMAIL_LOCALE);
+
+  return sendEmail({
+    to: params.to,
+    subject: params.isExceeded
+      ? "Monthly allowance used up"
+      : `Monthly allowance at ${params.percentageUsed}%`,
+    react: React.createElement(QuotaWarningEmail, {
+      workspaceName: params.workspaceName,
+      percentageUsed: params.percentageUsed,
+      used,
+      allowance,
+      upgradeUrl: params.upgradeUrl,
+      isExceeded: params.isExceeded,
+    }),
+    template: {
+      key: params.isExceeded ? "quota-exceeded" : "quota-warning",
+      variables: {
+        workspaceName: params.workspaceName,
+        percentageUsed: params.percentageUsed,
+        used,
+        allowance,
+        currency: params.allowance.currency,
+        upgradeUrl: params.upgradeUrl,
+      },
+    },
+  });
+}
+
+/** Send trial warning or depleted email. */
+export async function sendTrialWarningEmail(params: {
+  to: string;
+  workspaceName: string;
+  creditsRemaining: number;
+  totalCredits: number;
+  percentageRemaining: number;
+  upgradeUrl: string;
+  isDepleted: boolean;
+}): Promise<SendEmailResult> {
+  return sendEmail({
+    to: params.to,
+    subject: params.isDepleted
+      ? "Trial credits depleted"
+      : "Trial credits running low",
+    react: React.createElement(TrialWarningEmail, {
+      workspaceName: params.workspaceName,
+      creditsRemaining: params.creditsRemaining,
+      totalCredits: params.totalCredits,
+      percentageRemaining: params.percentageRemaining,
+      upgradeUrl: params.upgradeUrl,
+      isDepleted: params.isDepleted,
+    }),
+    template: {
+      key: params.isDepleted ? "trial-depleted" : "trial-warning",
+      variables: {
+        workspaceName: params.workspaceName,
+        creditsRemaining: params.creditsRemaining,
+        totalCredits: params.totalCredits,
+        percentageRemaining: params.percentageRemaining,
+        upgradeUrl: params.upgradeUrl,
+      },
+    },
+  });
+}
+
+export async function sendPaymentFailedEmail(params: {
+  to: string;
+  workspaceName: string;
+  amount: string;
+  updatePaymentUrl: string;
+}): Promise<SendEmailResult> {
+  return sendEmail({
+    to: params.to,
+    subject: `Payment failed for ${params.workspaceName}`,
+    react: React.createElement(PaymentFailedEmail, {
+      workspaceName: params.workspaceName,
+      amount: params.amount,
+      updatePaymentUrl: params.updatePaymentUrl,
+    }),
+    template: {
+      key: "payment-failed",
+      variables: {
+        workspaceName: params.workspaceName,
+        amount: params.amount,
+        updatePaymentUrl: params.updatePaymentUrl,
+      },
+    },
+  });
+}
+
+export async function sendSubscriptionConfirmedEmail(params: {
+  to: string;
+  workspaceName: string;
+  planName: string;
+  amount: string;
+  dashboardUrl: string;
+}): Promise<SendEmailResult> {
+  return sendEmail({
+    to: params.to,
+    subject: `Subscription confirmed - ${params.planName} plan`,
+    react: React.createElement(SubscriptionConfirmedEmail, {
+      workspaceName: params.workspaceName,
+      planName: params.planName,
+      amount: params.amount,
+      dashboardUrl: params.dashboardUrl,
+    }),
+    template: {
+      key: "subscription-confirmed",
+      variables: {
+        workspaceName: params.workspaceName,
+        planName: params.planName,
+        amount: params.amount,
+        dashboardUrl: params.dashboardUrl,
+      },
+    },
+  });
+}
+
+export async function sendTrialExpiryEmail(params: {
+  to: string;
+  workspaceName: string;
+  expiryDate: string;
+  daysRemaining: number;
+  upgradeUrl: string;
+}): Promise<SendEmailResult> {
+  return sendEmail({
+    to: params.to,
+    subject:
+      params.daysRemaining <= 0
+        ? `Your trial for ${params.workspaceName} has ended`
+        : `Your trial ends in ${params.daysRemaining} day${params.daysRemaining === 1 ? "" : "s"}`,
+    react: React.createElement(TrialExpiryEmail, {
+      workspaceName: params.workspaceName,
+      expiryDate: params.expiryDate,
+      daysRemaining: params.daysRemaining,
+      upgradeUrl: params.upgradeUrl,
+    }),
+    template: {
+      key: "trial-expiry",
+      variables: {
+        workspaceName: params.workspaceName,
+        expiryDate: params.expiryDate,
+        daysRemaining: params.daysRemaining,
+        upgradeUrl: params.upgradeUrl,
+      },
+    },
+  });
+}

package/src/email/templates/base-layout.tsx

@@ -0,0 +1,145 @@
+import {
+  Body,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+
+import { emailBrand } from "../brand";
+
+// Inline styles only: email clients do not reliably support CSS classes.
+// Colors are literal values, not CSS variables, so they survive dark-mode
+// email clients.
+
+export interface BaseLayoutProps {
+  preview: string;
+  children: React.ReactNode;
+}
+
+const colors = {
+  background: "#f4f4f5", // zinc-100
+  container: "#ffffff",
+  text: "#18181b", // zinc-900
+  muted: "#71717a", // zinc-500
+  brand: "#7c3aed", // violet-600
+  border: "#e4e4e7", // zinc-200
+} as const;
+
+export function BaseLayout({ preview, children }: BaseLayoutProps) {
+  const brand = emailBrand();
+  return (
+    <Html lang="en">
+      <Head>
+        <meta charSet="utf-8" />
+      </Head>
+      <Preview>{preview}</Preview>
+      <Body style={bodyStyle}>
+        <Container style={containerStyle}>
+          {brand.name ? (
+            <Section style={headerStyle}>
+              <Text style={logoStyle}>{brand.name}</Text>
+            </Section>
+          ) : null}
+
+          <Hr style={hrStyle} />
+
+          <Section style={contentStyle}>{children}</Section>
+
+          <Hr style={hrStyle} />
+
+          <Section style={footerStyle}>
+            {brand.name ? (
+              <Text style={footerTextStyle}>{brand.name}</Text>
+            ) : null}
+            <Text style={footerMutedStyle}>
+              This is a transactional email
+              {brand.name ? ` from ${brand.name}` : ""}.
+              {brand.supportEmail ? (
+                <>
+                  {" "}
+                  If you believe you received this email in error, please
+                  contact{" "}
+                  <Link
+                    href={`mailto:${brand.supportEmail}`}
+                    style={footerLinkStyle}
+                  >
+                    {brand.supportEmail}
+                  </Link>
+                  .
+                </>
+              ) : null}
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+const bodyStyle: React.CSSProperties = {
+  backgroundColor: colors.background,
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  margin: 0,
+  padding: "40px 0",
+};
+
+const containerStyle: React.CSSProperties = {
+  backgroundColor: colors.container,
+  borderRadius: "8px",
+  maxWidth: "600px",
+  margin: "0 auto",
+  border: `1px solid ${colors.border}`,
+};
+
+const headerStyle: React.CSSProperties = {
+  padding: "32px 40px 16px",
+};
+
+const logoStyle: React.CSSProperties = {
+  color: colors.brand,
+  fontSize: "24px",
+  fontWeight: 700,
+  margin: 0,
+  lineHeight: "32px",
+};
+
+const hrStyle: React.CSSProperties = {
+  borderColor: colors.border,
+  borderTop: "none",
+  margin: 0,
+};
+
+const contentStyle: React.CSSProperties = {
+  padding: "24px 40px",
+};
+
+const footerStyle: React.CSSProperties = {
+  padding: "16px 40px 32px",
+};
+
+const footerTextStyle: React.CSSProperties = {
+  color: colors.muted,
+  fontSize: "13px",
+  lineHeight: "20px",
+  margin: "0 0 8px",
+  fontWeight: 600,
+};
+
+const footerMutedStyle: React.CSSProperties = {
+  color: colors.muted,
+  fontSize: "12px",
+  lineHeight: "18px",
+  margin: 0,
+};
+
+const footerLinkStyle: React.CSSProperties = {
+  color: colors.brand,
+  textDecoration: "underline",
+};

package/src/email/templates/index.ts

@@ -0,0 +1,28 @@
+export { BaseLayout, type BaseLayoutProps } from "./base-layout";
+export { WelcomeEmail, type WelcomeEmailProps } from "./welcome";
+export { VerifyEmailEmail, type VerifyEmailEmailProps } from "./verify-email";
+export {
+  PasswordResetEmail,
+  type PasswordResetEmailProps,
+} from "./password-reset";
+export {
+  WorkspaceInvitationEmail,
+  type WorkspaceInvitationEmailProps,
+} from "./workspace-invitation";
+export {
+  QuotaWarningEmail,
+  type QuotaWarningEmailProps,
+} from "./quota-warning";
+export {
+  TrialWarningEmail,
+  type TrialWarningEmailProps,
+} from "./trial-warning";
+export {
+  PaymentFailedEmail,
+  type PaymentFailedEmailProps,
+} from "./payment-failed";
+export {
+  SubscriptionConfirmedEmail,
+  type SubscriptionConfirmedEmailProps,
+} from "./subscription-confirmed";
+export { TrialExpiryEmail, type TrialExpiryEmailProps } from "./trial-expiry";

package/src/email/templates/password-reset.tsx

@@ -0,0 +1,72 @@
+import { Button, Text } from "@react-email/components";
+import * as React from "react";
+import { BaseLayout } from "./base-layout";
+
+export interface PasswordResetEmailProps {
+  userName: string;
+  resetUrl: string;
+}
+
+export function PasswordResetEmail({
+  userName,
+  resetUrl,
+}: PasswordResetEmailProps) {
+  const text = {
+    preview: "Reset your password",
+    heading: "Reset your password",
+    greeting: "Hi",
+    body: "We received a request to reset your password. Click the button below to choose a new one.",
+    button: "Reset Password",
+    note: "This link expires in 1 hour. If you didn't request a password reset, you can safely ignore this email.",
+  };
+
+  return (
+    <BaseLayout preview={text.preview}>
+      <Text style={headingStyle}>{text.heading}</Text>
+      <Text style={bodyTextStyle}>
+        {text.greeting} {userName},
+      </Text>
+      <Text style={bodyTextStyle}>{text.body}</Text>
+      <Button href={resetUrl} style={buttonStyle}>
+        {text.button}
+      </Button>
+      <Text style={noteStyle}>{text.note}</Text>
+    </BaseLayout>
+  );
+}
+
+const headingStyle: React.CSSProperties = {
+  color: "#18181b",
+  fontSize: "22px",
+  fontWeight: 700,
+  lineHeight: "30px",
+  margin: "0 0 16px",
+};
+
+const bodyTextStyle: React.CSSProperties = {
+  color: "#18181b",
+  fontSize: "15px",
+  lineHeight: "24px",
+  margin: "0 0 12px",
+};
+
+const buttonStyle: React.CSSProperties = {
+  backgroundColor: "#7c3aed",
+  borderRadius: "6px",
+  color: "#ffffff",
+  display: "inline-block",
+  fontSize: "15px",
+  fontWeight: 600,
+  lineHeight: "100%",
+  padding: "12px 24px",
+  textDecoration: "none",
+  textAlign: "center" as const,
+  marginTop: "8px",
+};
+
+const noteStyle: React.CSSProperties = {
+  color: "#71717a",
+  fontSize: "13px",
+  lineHeight: "20px",
+  marginTop: "20px",
+};

package/src/email/templates/payment-failed.tsx

@@ -0,0 +1,77 @@
+import { Button, Text } from "@react-email/components";
+import * as React from "react";
+import { BaseLayout } from "./base-layout";
+
+export interface PaymentFailedEmailProps {
+  workspaceName: string;
+  amount: string;
+  updatePaymentUrl: string;
+}
+
+export function PaymentFailedEmail({
+  workspaceName,
+  amount,
+  updatePaymentUrl,
+}: PaymentFailedEmailProps) {
+  const text = {
+    preview: `Payment failed for ${workspaceName}`,
+    heading: "Payment Failed",
+    body1: "We were unable to process the payment of",
+    body2: "for your workspace",
+    body3: "",
+    warning:
+      "Your subscription will be restricted to free limits after a 3-day grace period if payment is not updated.",
+    button: "Update Payment Method",
+  };
+
+  return (
+    <BaseLayout preview={text.preview}>
+      <Text style={headingStyle}>{text.heading}</Text>
+      <Text style={bodyTextStyle}>
+        {text.body1} <strong>{amount}</strong> {text.body2} &lsquo;
+        {workspaceName}&rsquo;{text.body3}
+      </Text>
+      <Text style={warningTextStyle}>{text.warning}</Text>
+      <Button href={updatePaymentUrl} style={buttonStyle}>
+        {text.button}
+      </Button>
+    </BaseLayout>
+  );
+}
+
+const headingStyle: React.CSSProperties = {
+  color: "#18181b",
+  fontSize: "22px",
+  fontWeight: 700,
+  lineHeight: "30px",
+  margin: "0 0 16px",
+};
+
+const bodyTextStyle: React.CSSProperties = {
+  color: "#18181b",
+  fontSize: "15px",
+  lineHeight: "24px",
+  margin: "0 0 12px",
+};
+
+const warningTextStyle: React.CSSProperties = {
+  color: "#dc2626",
+  fontSize: "15px",
+  fontWeight: 600,
+  lineHeight: "24px",
+  margin: "0 0 12px",
+};
+
+const buttonStyle: React.CSSProperties = {
+  backgroundColor: "#7c3aed",
+  borderRadius: "6px",
+  color: "#ffffff",
+  display: "inline-block",
+  fontSize: "15px",
+  fontWeight: 600,
+  lineHeight: "100%",
+  padding: "12px 24px",
+  textDecoration: "none",
+  textAlign: "center" as const,
+  marginTop: "8px",
+};