brookmind-emails 0.1.7

package/src/modelfy/index.ts

@@ -0,0 +1,57 @@
+import { render } from "@react-email/render";
+import { OtpEmail, type OtpEmailProps } from "./templates/OtpEmail.js";
+import {
+  PromoSubscriptionEmail,
+  type PromoSubscriptionEmailProps,
+} from "./templates/PromoSubscriptionEmail.js";
+import { GrantCreditsEmail, type GrantCreditsEmailProps } from "./templates/GrantCreditsEmail.js";
+
+// Re-export types
+export type { OtpEmailProps, PromoSubscriptionEmailProps, GrantCreditsEmailProps };
+
+// Re-export components for preview
+export { OtpEmail, PromoSubscriptionEmail, GrantCreditsEmail };
+
+// Render functions
+export interface RenderResult {
+  subject: string;
+  html: string;
+  text: string;
+}
+
+export async function renderOtpEmail(props: OtpEmailProps): Promise<RenderResult> {
+  const html = await render(OtpEmail(props));
+  const text = await render(OtpEmail(props), { plainText: true });
+
+  return {
+    subject: "Your Modelfy access code",
+    html,
+    text,
+  };
+}
+
+export async function renderPromoSubscriptionEmail(
+  props: PromoSubscriptionEmailProps
+): Promise<RenderResult> {
+  const html = await render(PromoSubscriptionEmail(props));
+  const text = await render(PromoSubscriptionEmail(props), { plainText: true });
+
+  return {
+    subject: `You've received a ${props.durationDays}-day ${props.planName} subscription!`,
+    html,
+    text,
+  };
+}
+
+export async function renderGrantCreditsEmail(
+  props: GrantCreditsEmailProps
+): Promise<RenderResult> {
+  const html = await render(GrantCreditsEmail(props));
+  const text = await render(GrantCreditsEmail(props), { plainText: true });
+
+  return {
+    subject: `You've received ${(props.credits ?? 0).toLocaleString()} credits on Modelfy!`,
+    html,
+    text,
+  };
+}

package/src/modelfy/templates/GrantCreditsEmail.tsx

@@ -0,0 +1,205 @@
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Section,
+  Text,
+  Link,
+  Preview,
+  Font,
+} from "@react-email/components";
+import { Header, Footer, Button } from "../../shared/components/index.js";
+import { modelfyConfig } from "../config.js";
+
+export interface GrantCreditsEmailProps {
+  email: string;
+  credits?: number;
+  durationDays: number;
+  expiresAt: string;
+  description?: string;
+}
+
+const styles = {
+  body: {
+    margin: 0,
+    padding: 0,
+    backgroundColor: "#F8FAFC",
+    fontFamily: "'Outfit', Arial, sans-serif",
+  },
+  container: {
+    maxWidth: "560px",
+    margin: "32px auto",
+    backgroundColor: "#ffffff",
+    border: "1px solid #E2E8F0",
+    borderRadius: "16px",
+    boxShadow: "0 24px 48px rgba(15, 23, 42, 0.08)",
+    overflow: "hidden",
+  },
+  content: {
+    padding: "32px 40px 24px",
+  },
+  heading: {
+    margin: "0 0 16px",
+    fontSize: "24px",
+    fontWeight: 700,
+    color: "#0F172A",
+    textAlign: "center" as const,
+  },
+  paragraph: {
+    margin: "0 0 24px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: "rgba(15, 23, 42, 0.72)",
+  },
+  creditBox: {
+    backgroundColor: "rgba(34, 197, 94, 0.08)",
+    border: "1px solid rgba(34, 197, 94, 0.24)",
+    borderRadius: "12px",
+    padding: "24px",
+    marginBottom: "24px",
+    textAlign: "center" as const,
+  },
+  creditAmount: {
+    fontSize: "48px",
+    fontWeight: 700,
+    color: "#16A34A",
+    margin: "0 0 8px",
+  },
+  creditLabel: {
+    fontSize: "16px",
+    color: "rgba(15, 23, 42, 0.6)",
+    margin: 0,
+  },
+  detailsBox: {
+    backgroundColor: "#F8FAFC",
+    borderRadius: "8px",
+    padding: "16px",
+    marginBottom: "24px",
+  },
+  detailRow: {
+    display: "flex" as const,
+    justifyContent: "space-between" as const,
+    marginBottom: "8px",
+  },
+  detailLabel: {
+    fontSize: "14px",
+    color: "rgba(15, 23, 42, 0.6)",
+    margin: 0,
+  },
+  detailValue: {
+    fontSize: "14px",
+    fontWeight: 600,
+    color: "#0F172A",
+    margin: 0,
+  },
+  buttonContainer: {
+    textAlign: "center" as const,
+    marginBottom: "24px",
+  },
+  smallText: {
+    margin: "0 0 12px",
+    fontSize: "14px",
+    lineHeight: "1.6",
+    color: "rgba(15, 23, 42, 0.6)",
+  },
+  link: {
+    color: "#6366F1",
+    textDecoration: "none",
+    fontWeight: 600,
+  },
+};
+
+export function GrantCreditsEmail({
+  email,
+  credits,
+  durationDays,
+  expiresAt,
+  description,
+}: GrantCreditsEmailProps) {
+  const safeCredits = Number.isFinite(credits) ? Number(credits) : 0;
+
+  return (
+    <Html lang="en">
+      <Head>
+        <Font
+          fontFamily="Outfit"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4G-EiAou6Y.woff2",
+            format: "woff2",
+          }}
+          fontWeight={400}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>
+        You've received {safeCredits.toLocaleString()} credits on Modelfy!
+      </Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Header logoUrl={modelfyConfig.logoUrl} logoAlt="Modelfy" subtitle="Credits added" />
+          <Section style={styles.content}>
+            <Text style={styles.heading}>Credits Added to Your Account!</Text>
+            <Text style={styles.paragraph}>
+              Hi <strong>{email}</strong>, you've received bonus credits to use on Modelfy.
+            </Text>
+
+            <div style={styles.creditBox}>
+              <Text style={styles.creditAmount}>+{safeCredits.toLocaleString()}</Text>
+              <Text style={styles.creditLabel}>credits</Text>
+            </div>
+
+            <div style={styles.detailsBox}>
+              <table width="100%" cellPadding={0} cellSpacing={0}>
+                <tr>
+                  <td style={{ paddingBottom: "8px" }}>
+                    <Text style={styles.detailLabel}>Valid for</Text>
+                  </td>
+                  <td style={{ paddingBottom: "8px", textAlign: "right" }}>
+                    <Text style={styles.detailValue}>{durationDays} days</Text>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <Text style={styles.detailLabel}>Expires</Text>
+                  </td>
+                  <td style={{ textAlign: "right" }}>
+                    <Text style={styles.detailValue}>{expiresAt}</Text>
+                  </td>
+                </tr>
+              </table>
+            </div>
+
+            {description && (
+              <Text style={styles.paragraph}>
+                <em>"{description}"</em>
+              </Text>
+            )}
+
+            <div style={styles.buttonContainer}>
+              <Button href={modelfyConfig.appUrl}>Start Creating</Button>
+            </div>
+
+            <Text style={styles.smallText}>
+              These credits will be used before your regular credits and expire on {expiresAt}.
+            </Text>
+            <Text style={styles.smallText}>
+              Questions? Contact us at{" "}
+              <Link href={`mailto:${modelfyConfig.supportEmail}`} style={styles.link}>
+                {modelfyConfig.supportEmail}
+              </Link>
+            </Text>
+          </Section>
+          <Footer
+            companyName={modelfyConfig.companyName}
+            message="You received this email because credits were added to your Modelfy account."
+            supportEmail={modelfyConfig.supportEmail}
+          />
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default GrantCreditsEmail;

package/src/modelfy/templates/OtpEmail.tsx

@@ -0,0 +1,128 @@
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Section,
+  Text,
+  Link,
+  Preview,
+  Font,
+} from "@react-email/components";
+import { Header, Footer } from "../../shared/components/index.js";
+import { modelfyConfig } from "../config.js";
+
+export interface OtpEmailProps {
+  otp: string;
+  email: string;
+  expirationMinutes?: number;
+}
+
+const styles = {
+  body: {
+    margin: 0,
+    padding: 0,
+    backgroundColor: "#F8FAFC",
+    fontFamily: "'Outfit', Arial, sans-serif",
+  },
+  container: {
+    maxWidth: "560px",
+    margin: "32px auto",
+    backgroundColor: "#ffffff",
+    border: "1px solid #E2E8F0",
+    borderRadius: "16px",
+    boxShadow: "0 24px 48px rgba(15, 23, 42, 0.08)",
+    overflow: "hidden",
+  },
+  content: {
+    padding: "32px 40px 24px",
+  },
+  paragraph: {
+    margin: "16px 0 24px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: "rgba(15, 23, 42, 0.72)",
+  },
+  otpContainer: {
+    display: "inline-block",
+    backgroundColor: "rgba(99, 102, 241, 0.08)",
+    border: "1px solid rgba(99, 102, 241, 0.24)",
+    borderRadius: "12px",
+    padding: "20px 32px",
+    marginBottom: "24px",
+  },
+  otp: {
+    fontSize: "32px",
+    letterSpacing: "8px",
+    fontWeight: 700,
+    color: "#0F172A",
+    margin: 0,
+  },
+  smallText: {
+    margin: "0 0 12px",
+    fontSize: "15px",
+    lineHeight: "1.6",
+    color: "rgba(15, 23, 42, 0.72)",
+  },
+  link: {
+    color: "#0F172A",
+    textDecoration: "none",
+    fontWeight: 600,
+  },
+};
+
+export function OtpEmail({ otp, email, expirationMinutes = 10 }: OtpEmailProps) {
+  const sanitizedOtp = (typeof otp === "string" ? otp : String(otp ?? ""))
+    .replace(/\s+/g, "")
+    .trim();
+
+  return (
+    <Html lang="en">
+      <Head>
+        <Font
+          fontFamily="Outfit"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4G-EiAou6Y.woff2",
+            format: "woff2",
+          }}
+          fontWeight={400}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>Your Modelfy access code: {sanitizedOtp}</Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Header logoUrl={modelfyConfig.logoUrl} logoAlt="Modelfy" subtitle="Access code" />
+          <Section style={styles.content}>
+            <Text style={styles.paragraph}>
+              Hi <strong>{email}</strong>, use the code below to sign in. It will stay valid for the
+              next <strong>{expirationMinutes} minutes</strong>.
+            </Text>
+            <div style={styles.otpContainer}>
+              <Text style={styles.otp}>{sanitizedOtp}</Text>
+            </div>
+            <Text style={styles.smallText}>
+              If you didn't request this code, you can safely ignore this email. No one else can
+              access your account without it.
+            </Text>
+            <Text style={styles.smallText}>
+              Need a hand? Reach us anytime at{" "}
+              <Link href={`mailto:${modelfyConfig.supportEmail}`} style={styles.link}>
+                {modelfyConfig.supportEmail}
+              </Link>
+              .
+            </Text>
+          </Section>
+          <Footer
+            companyName={modelfyConfig.companyName}
+            message="You received this email because someone attempted to sign in to Modelfy with this address."
+            supportEmail={modelfyConfig.supportEmail}
+          />
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default OtpEmail;

package/src/modelfy/templates/PromoSubscriptionEmail.tsx

@@ -0,0 +1,189 @@
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Section,
+  Text,
+  Link,
+  Preview,
+  Font,
+} from "@react-email/components";
+import { Header, Footer, Button } from "../../shared/components/index.js";
+import { modelfyConfig } from "../config.js";
+
+export interface PromoSubscriptionEmailProps {
+  email: string;
+  planName: string;
+  durationDays: number;
+  credits?: number;
+  expiresAt: string;
+  notes?: string;
+}
+
+const styles = {
+  body: {
+    margin: 0,
+    padding: 0,
+    backgroundColor: "#F8FAFC",
+    fontFamily: "'Outfit', Arial, sans-serif",
+  },
+  container: {
+    maxWidth: "560px",
+    margin: "32px auto",
+    backgroundColor: "#ffffff",
+    border: "1px solid #E2E8F0",
+    borderRadius: "16px",
+    boxShadow: "0 24px 48px rgba(15, 23, 42, 0.08)",
+    overflow: "hidden",
+  },
+  content: {
+    padding: "32px 40px 24px",
+  },
+  heading: {
+    margin: "0 0 16px",
+    fontSize: "24px",
+    fontWeight: 700,
+    color: "#0F172A",
+    textAlign: "center" as const,
+  },
+  paragraph: {
+    margin: "0 0 24px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: "rgba(15, 23, 42, 0.72)",
+  },
+  highlightBox: {
+    backgroundColor: "rgba(99, 102, 241, 0.08)",
+    border: "1px solid rgba(99, 102, 241, 0.24)",
+    borderRadius: "12px",
+    padding: "24px",
+    marginBottom: "24px",
+  },
+  highlightRow: {
+    display: "flex" as const,
+    justifyContent: "space-between" as const,
+    marginBottom: "12px",
+  },
+  highlightLabel: {
+    fontSize: "14px",
+    color: "rgba(15, 23, 42, 0.6)",
+    margin: 0,
+  },
+  highlightValue: {
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#0F172A",
+    margin: 0,
+  },
+  buttonContainer: {
+    textAlign: "center" as const,
+    marginBottom: "24px",
+  },
+  smallText: {
+    margin: "0 0 12px",
+    fontSize: "14px",
+    lineHeight: "1.6",
+    color: "rgba(15, 23, 42, 0.6)",
+  },
+  link: {
+    color: "#6366F1",
+    textDecoration: "none",
+    fontWeight: 600,
+  },
+};
+
+export function PromoSubscriptionEmail({
+  email,
+  planName,
+  durationDays,
+  credits,
+  expiresAt,
+  notes,
+}: PromoSubscriptionEmailProps) {
+  const safeCredits = Number.isFinite(credits) ? Number(credits) : 0;
+
+  return (
+    <Html lang="en">
+      <Head>
+        <Font
+          fontFamily="Outfit"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/outfit/v11/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4G-EiAou6Y.woff2",
+            format: "woff2",
+          }}
+          fontWeight={400}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>
+        {`You've received a ${durationDays}-day ${planName} subscription!`}
+      </Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          <Header logoUrl={modelfyConfig.logoUrl} logoAlt="Modelfy" subtitle="Gift for you" />
+          <Section style={styles.content}>
+            <Text style={styles.heading}>You've Got a Gift!</Text>
+            <Text style={styles.paragraph}>
+              Hi <strong>{email}</strong>, great news! You've been granted a promotional{" "}
+              <strong>{planName}</strong> subscription.
+            </Text>
+
+            <div style={styles.highlightBox}>
+              <table width="100%" cellPadding={0} cellSpacing={0}>
+                <tr>
+                  <td style={{ paddingBottom: "12px" }}>
+                    <Text style={styles.highlightLabel}>Plan</Text>
+                    <Text style={styles.highlightValue}>{planName}</Text>
+                  </td>
+                  <td style={{ paddingBottom: "12px", textAlign: "right" }}>
+                    <Text style={styles.highlightLabel}>Duration</Text>
+                    <Text style={styles.highlightValue}>{durationDays} days</Text>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <Text style={styles.highlightLabel}>Credits Included</Text>
+                    <Text style={styles.highlightValue}>{safeCredits.toLocaleString()}</Text>
+                  </td>
+                  <td style={{ textAlign: "right" }}>
+                    <Text style={styles.highlightLabel}>Expires</Text>
+                    <Text style={styles.highlightValue}>{expiresAt}</Text>
+                  </td>
+                </tr>
+              </table>
+            </div>
+
+            {notes && (
+              <Text style={styles.paragraph}>
+                <em>"{notes}"</em>
+              </Text>
+            )}
+
+            <div style={styles.buttonContainer}>
+              <Button href={modelfyConfig.appUrl}>Open Modelfy</Button>
+            </div>
+
+            <Text style={styles.smallText}>
+              This promotional subscription will not auto-renew. Enjoy your free access!
+            </Text>
+            <Text style={styles.smallText}>
+              Questions? Contact us at{" "}
+              <Link href={`mailto:${modelfyConfig.supportEmail}`} style={styles.link}>
+                {modelfyConfig.supportEmail}
+              </Link>
+            </Text>
+          </Section>
+          <Footer
+            companyName={modelfyConfig.companyName}
+            message="You received this email because you were granted a promotional subscription."
+            supportEmail={modelfyConfig.supportEmail}
+          />
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default PromoSubscriptionEmail;

package/src/modelfy/templates/index.ts

@@ -0,0 +1,3 @@
+export { OtpEmail, type OtpEmailProps } from "./OtpEmail.js";
+export { PromoSubscriptionEmail, type PromoSubscriptionEmailProps } from "./PromoSubscriptionEmail.js";
+export { GrantCreditsEmail, type GrantCreditsEmailProps } from "./GrantCreditsEmail.js";

package/src/shared/components/Button.tsx

@@ -0,0 +1,39 @@
+import { Button as ReactEmailButton } from "@react-email/components";
+
+export interface ButtonProps {
+  href: string;
+  children: React.ReactNode;
+  variant?: "primary" | "secondary";
+}
+
+const baseStyles = {
+  display: "inline-block",
+  padding: "14px 28px",
+  fontSize: "16px",
+  fontWeight: 600,
+  textDecoration: "none",
+  borderRadius: "8px",
+  textAlign: "center" as const,
+};
+
+const variants = {
+  primary: {
+    ...baseStyles,
+    backgroundColor: "#18181B",
+    color: "#ffffff",
+  },
+  secondary: {
+    ...baseStyles,
+    backgroundColor: "transparent",
+    color: "#18181B",
+    border: "2px solid #18181B",
+  },
+};
+
+export function Button({ href, children, variant = "primary" }: ButtonProps) {
+  return (
+    <ReactEmailButton href={href} style={variants[variant]}>
+      {children}
+    </ReactEmailButton>
+  );
+}

package/src/shared/components/Footer.tsx

@@ -0,0 +1,63 @@
+import { Section, Text, Link } from "@react-email/components";
+
+export interface FooterProps {
+  companyName: string;
+  year?: number;
+  message?: string;
+  supportEmail?: string;
+}
+
+const styles = {
+  footer: {
+    padding: "20px 40px",
+    backgroundColor: "#F1F5F9",
+    borderTop: "1px solid rgba(148, 163, 184, 0.2)",
+  },
+  text: {
+    margin: 0,
+    fontSize: "13px",
+    lineHeight: "1.6",
+    color: "rgba(15, 23, 42, 0.72)",
+  },
+  noReplyText: {
+    margin: "12px 0 0",
+    fontSize: "12px",
+    lineHeight: "1.5",
+    color: "rgba(15, 23, 42, 0.5)",
+  },
+  link: {
+    color: "#6366F1",
+    textDecoration: "none",
+  },
+};
+
+export function Footer({
+  companyName,
+  year = new Date().getFullYear(),
+  message,
+  supportEmail,
+}: FooterProps) {
+  return (
+    <Section style={styles.footer}>
+      <Text style={styles.text}>
+        © {year} {companyName}. All rights reserved.
+        {message && (
+          <>
+            <br />
+            {message}
+          </>
+        )}
+      </Text>
+      {supportEmail && (
+        <Text style={styles.noReplyText}>
+          This is an automated message. Please do not reply to this email. For any questions,
+          contact us at{" "}
+          <Link href={`mailto:${supportEmail}`} style={styles.link}>
+            {supportEmail}
+          </Link>
+          .
+        </Text>
+      )}
+    </Section>
+  );
+}