brookmind-emails 0.1.11 → 0.1.13

package/src/foodstudio/templates/PromoSubscriptionEmail.tsx

@@ -0,0 +1,344 @@
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Section,
+  Text,
+  Link,
+  Preview,
+  Font,
+  Img,
+  Button as ReactEmailButton,
+} from "@react-email/components";
+import { foodstudioConfig } from "../config.js";
+
+export interface PromoSubscriptionEmailProps {
+  email: string;
+  planName: string;
+  durationDays: number;
+  credits?: number;
+  expiresAt: string;
+  notes?: string;
+}
+
+// Design System Colors - Matching FoodStudio Landing
+const colors = {
+  background: "#0d0d0d",
+  cardBg: "#121212",
+  primary: "#ea580c",
+  accent: "#ea580c",
+  white: "#f2f2f2",
+  textSecondary: "rgba(242, 242, 242, 0.7)",
+  textMuted: "#8c8c8c",
+  border: "#262626",
+};
+
+const styles = {
+  body: {
+    margin: 0,
+    padding: 0,
+    backgroundColor: colors.background,
+    fontFamily: "'Inter', 'Segoe UI', Arial, sans-serif",
+  },
+  container: {
+    maxWidth: "600px",
+    margin: "0 auto",
+    backgroundColor: colors.background,
+  },
+  header: {
+    backgroundColor: colors.background,
+    padding: "40px 32px 24px",
+    textAlign: "center" as const,
+  },
+  logo: {
+    display: "block" as const,
+    margin: "0 auto",
+  },
+  heroSection: {
+    padding: "24px 32px 40px",
+    textAlign: "center" as const,
+  },
+  heroTagline: {
+    margin: "0 0 12px",
+    fontSize: "13px",
+    fontWeight: 600,
+    color: colors.accent,
+    letterSpacing: "2px",
+    textTransform: "uppercase" as const,
+  },
+  heroHeading: {
+    margin: "0 0 16px",
+    fontSize: "28px",
+    fontWeight: 700,
+    color: colors.white,
+    lineHeight: "1.3",
+  },
+  paragraph: {
+    margin: "0 0 28px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+    textAlign: "center" as const,
+  },
+  highlightBox: {
+    backgroundColor: "rgba(234, 88, 12, 0.15)",
+    border: `1px solid rgba(234, 88, 12, 0.3)`,
+    borderRadius: "12px",
+    padding: "24px",
+    marginBottom: "28px",
+  },
+  highlightLabel: {
+    fontSize: "13px",
+    color: colors.textMuted,
+    margin: "0 0 4px",
+  },
+  highlightValue: {
+    fontSize: "16px",
+    fontWeight: 600,
+    color: colors.white,
+    margin: 0,
+  },
+  buttonContainer: {
+    textAlign: "center" as const,
+    marginBottom: "28px",
+  },
+  ctaButton: {
+    display: "inline-block",
+    padding: "14px 36px",
+    fontSize: "15px",
+    fontWeight: 600,
+    textDecoration: "none",
+    borderRadius: "10px",
+    backgroundColor: colors.primary,
+    color: "#ffffff",
+    textAlign: "center" as const,
+  },
+  contentSection: {
+    backgroundColor: colors.cardBg,
+    padding: "32px",
+    borderTop: `1px solid ${colors.border}`,
+  },
+  smallText: {
+    margin: "0 0 12px",
+    fontSize: "14px",
+    lineHeight: "1.6",
+    color: colors.textMuted,
+    textAlign: "center" as const,
+  },
+  notesText: {
+    margin: "0 0 24px",
+    fontSize: "15px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+    textAlign: "center" as const,
+    fontStyle: "italic" as const,
+  },
+  link: {
+    color: colors.primary,
+    textDecoration: "none",
+    fontWeight: 600,
+  },
+  footer: {
+    backgroundColor: colors.cardBg,
+    padding: "24px 32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+  },
+  footerLogo: {
+    display: "block" as const,
+    margin: "0 auto 12px",
+    opacity: 0.6,
+  },
+  footerText: {
+    margin: "0 0 4px",
+    fontSize: "11px",
+    color: colors.textMuted,
+    lineHeight: "1.6",
+  },
+  footerLink: {
+    color: colors.textMuted,
+    textDecoration: "underline",
+  },
+  downloadSection: {
+    backgroundColor: colors.cardBg,
+    padding: "24px 32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+  },
+  downloadText: {
+    margin: "0 0 16px",
+    fontSize: "14px",
+    color: colors.white,
+  },
+  badgeContainer: {
+    textAlign: "center" as const,
+  },
+  badge: {
+    display: "inline-block",
+    margin: "0 8px",
+  },
+};
+
+export function PromoSubscriptionEmail({
+  email = "user@example.com",
+  planName = "Pro",
+  durationDays = 30,
+  credits = 500,
+  expiresAt = "January 31, 2025",
+  notes,
+}: PromoSubscriptionEmailProps): React.ReactElement {
+  const safeCredits = Number.isFinite(credits) ? Number(credits) : 0;
+
+  return (
+    <Html lang="en">
+      <Head>
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_0.woff2",
+            format: "woff2",
+          }}
+          fontWeight={400}
+          fontStyle="normal"
+        />
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hjp-Ek-_0.woff2",
+            format: "woff2",
+          }}
+          fontWeight={700}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>
+        {`You've received a ${durationDays}-day ${planName} subscription!`}
+      </Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          {/* Header */}
+          <Section style={styles.header}>
+            <Img
+              src={foodstudioConfig.logoUrl}
+              width="130"
+              height="auto"
+              alt="FoodStudio"
+              style={styles.logo}
+            />
+          </Section>
+
+          {/* Hero Section */}
+          <Section style={styles.heroSection}>
+            <Text style={styles.heroTagline}>Gift for You</Text>
+            <Text style={styles.heroHeading}>You've Got a Gift!</Text>
+            <Text style={{ ...styles.paragraph, margin: "0 0 4px" }}>
+              Hi <span style={{ color: colors.white, fontWeight: 600 }}>{email}</span>, great news!
+            </Text>
+            <Text style={styles.paragraph}>
+              You've been granted a promotional{" "}
+              <span style={{ color: colors.accent, fontWeight: 600 }}>{planName}</span> subscription.
+            </Text>
+
+            <div style={styles.highlightBox}>
+              <table width="100%" cellPadding={0} cellSpacing={0}>
+                <tbody>
+                  <tr>
+                    <td style={{ paddingBottom: "16px" }}>
+                      <Text style={styles.highlightLabel}>Plan</Text>
+                      <Text style={styles.highlightValue}>{planName}</Text>
+                    </td>
+                    <td style={{ paddingBottom: "16px", textAlign: "right" as const }}>
+                      <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" as const }}>
+                      <Text style={styles.highlightLabel}>Expires</Text>
+                      <Text style={styles.highlightValue}>{expiresAt}</Text>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            {notes && <Text style={styles.notesText}>"{notes}"</Text>}
+
+            <div style={styles.buttonContainer}>
+              <ReactEmailButton href={foodstudioConfig.appUrl} style={styles.ctaButton}>
+                Open FoodStudio
+              </ReactEmailButton>
+            </div>
+          </Section>
+
+          {/* Content Section */}
+          <Section style={styles.contentSection}>
+            <Text style={styles.smallText}>
+              This promotional subscription will not auto-renew. Enjoy your free access!
+            </Text>
+            <Text style={styles.smallText}>
+              Questions?{" "}
+              <Link href={`mailto:${foodstudioConfig.supportEmail}`} style={styles.link}>
+                {foodstudioConfig.supportEmail}
+              </Link>
+            </Text>
+          </Section>
+
+          {/* Download App Section */}
+          <Section style={styles.downloadSection}>
+            <Text style={styles.downloadText}>Get the FoodStudio app</Text>
+            <div style={styles.badgeContainer}>
+              <Link href={foodstudioConfig.appStoreUrl} style={styles.badge}>
+                <Img
+                  src={foodstudioConfig.appStoreBadgeUrl}
+                  width="120"
+                  height="40"
+                  alt="Download on the App Store"
+                />
+              </Link>
+              <Link href={foodstudioConfig.playStoreUrl} style={styles.badge}>
+                <Img
+                  src={foodstudioConfig.playStoreBadgeUrl}
+                  width="135"
+                  height="40"
+                  alt="Get it on Google Play"
+                />
+              </Link>
+            </div>
+          </Section>
+
+          {/* Footer */}
+          <Section style={styles.footer}>
+            <Img
+              src={foodstudioConfig.logoUrl}
+              width="80"
+              height="auto"
+              alt="FoodStudio"
+              style={styles.footerLogo}
+            />
+            <Text style={styles.footerText}>
+              © {new Date().getFullYear()} {foodstudioConfig.companyName}. All rights reserved.
+            </Text>
+            <Text style={styles.footerText}>
+              You received this email because you were granted a promotional subscription.
+            </Text>
+            <Text style={styles.footerText}>
+              <Link href={`${foodstudioConfig.appUrl}/privacy`} style={styles.footerLink}>
+                Privacy Policy
+              </Link>
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default PromoSubscriptionEmail;

package/src/foodstudio/templates/WelcomeEmail.tsx

@@ -0,0 +1,293 @@
+import {
+  Html,
+  Head,
+  Body,
+  Container,
+  Section,
+  Text,
+  Link,
+  Preview,
+  Font,
+  Img,
+  Button as ReactEmailButton,
+} from "@react-email/components";
+import { foodstudioConfig } from "../config.js";
+
+export interface WelcomeEmailProps {
+  email: string;
+}
+
+// Design System Colors - Matching FoodStudio Landing
+const colors = {
+  background: "#0d0d0d",
+  cardBg: "#121212",
+  primary: "#ea580c",
+  white: "#f2f2f2",
+  textSecondary: "rgba(242, 242, 242, 0.7)",
+  textMuted: "#8c8c8c",
+  border: "#262626",
+};
+
+const styles = {
+  body: {
+    margin: 0,
+    padding: 0,
+    backgroundColor: colors.background,
+    fontFamily: "'Inter', 'Segoe UI', Arial, sans-serif",
+  },
+  container: {
+    maxWidth: "600px",
+    margin: "0 auto",
+    backgroundColor: colors.background,
+  },
+  header: {
+    backgroundColor: colors.background,
+    padding: "40px 32px 24px",
+    textAlign: "center" as const,
+  },
+  logo: {
+    display: "block" as const,
+    margin: "0 auto",
+  },
+  heroSection: {
+    padding: "24px 32px 40px",
+    textAlign: "center" as const,
+  },
+  heroTagline: {
+    margin: "0 0 12px",
+    fontSize: "13px",
+    fontWeight: 600,
+    color: colors.primary,
+    letterSpacing: "2px",
+    textTransform: "uppercase" as const,
+  },
+  heroHeading: {
+    margin: "0 0 16px",
+    fontSize: "28px",
+    fontWeight: 700,
+    color: colors.white,
+    lineHeight: "1.3",
+  },
+  heroSubheading: {
+    margin: "0 0 28px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+  },
+  heroCta: {
+    display: "inline-block",
+    padding: "14px 36px",
+    fontSize: "15px",
+    fontWeight: 600,
+    textDecoration: "none",
+    borderRadius: "10px",
+    backgroundColor: colors.primary,
+    color: "#ffffff",
+    textAlign: "center" as const,
+  },
+  welcomeSection: {
+    backgroundColor: colors.cardBg,
+    padding: "32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+    borderBottom: `1px solid ${colors.border}`,
+  },
+  welcomeText: {
+    margin: "0 0 16px",
+    fontSize: "16px",
+    lineHeight: "1.6",
+    color: colors.textSecondary,
+  },
+  welcomeEmail: {
+    color: colors.white,
+    fontWeight: 600,
+  },
+  supportSection: {
+    backgroundColor: colors.background,
+    padding: "32px",
+    textAlign: "center" as const,
+  },
+  supportText: {
+    margin: "0 0 4px",
+    fontSize: "13px",
+    color: colors.textMuted,
+  },
+  supportLink: {
+    color: colors.primary,
+    textDecoration: "none",
+    fontWeight: 600,
+  },
+  footer: {
+    backgroundColor: colors.cardBg,
+    padding: "24px 32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+  },
+  footerLogo: {
+    display: "block" as const,
+    margin: "0 auto 12px",
+    opacity: 0.6,
+  },
+  footerText: {
+    margin: "0 0 4px",
+    fontSize: "11px",
+    color: colors.textMuted,
+    lineHeight: "1.6",
+  },
+  footerLink: {
+    color: colors.textMuted,
+    textDecoration: "underline",
+  },
+  downloadSection: {
+    backgroundColor: colors.cardBg,
+    padding: "24px 32px",
+    textAlign: "center" as const,
+    borderTop: `1px solid ${colors.border}`,
+  },
+  downloadText: {
+    margin: "0 0 16px",
+    fontSize: "14px",
+    color: colors.white,
+  },
+  badgeContainer: {
+    textAlign: "center" as const,
+  },
+  badge: {
+    display: "inline-block",
+    margin: "0 8px",
+  },
+};
+
+export function WelcomeEmail({ email = "user@example.com" }: WelcomeEmailProps): React.ReactElement {
+  return (
+    <Html lang="en">
+      <Head>
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_0.woff2",
+            format: "woff2",
+          }}
+          fontWeight={400}
+          fontStyle="normal"
+        />
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hjp-Ek-_0.woff2",
+            format: "woff2",
+          }}
+          fontWeight={600}
+          fontStyle="normal"
+        />
+        <Font
+          fontFamily="Inter"
+          fallbackFontFamily="Arial"
+          webFont={{
+            url: "https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuFuYAZ9hjp-Ek-_0.woff2",
+            format: "woff2",
+          }}
+          fontWeight={700}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>Welcome to FoodStudio</Preview>
+      <Body style={styles.body}>
+        <Container style={styles.container}>
+          {/* Header */}
+          <Section style={styles.header}>
+            <Img
+              src={foodstudioConfig.logoUrl}
+              width="130"
+              height="auto"
+              alt="FoodStudio"
+              style={styles.logo}
+            />
+          </Section>
+
+          {/* Hero Section */}
+          <Section style={styles.heroSection}>
+            <Text style={styles.heroTagline}>Welcome to FoodStudio</Text>
+            <Text style={styles.heroHeading}>
+              Your Account is Ready!
+            </Text>
+            <Text style={styles.heroSubheading}>
+              We're excited to have you on board. Start exploring FoodStudio and discover all the amazing features waiting for you.
+            </Text>
+            <ReactEmailButton href={foodstudioConfig.appUrl} style={styles.heroCta}>
+              Get Started
+            </ReactEmailButton>
+          </Section>
+
+          {/* Welcome Message */}
+          <Section style={styles.welcomeSection}>
+            <Text style={styles.welcomeText}>
+              Hi <span style={styles.welcomeEmail}>{email}</span>, your account is ready.
+              <br />
+              You now have access to the complete FoodStudio platform.
+            </Text>
+          </Section>
+
+          {/* Support Section */}
+          <Section style={styles.supportSection}>
+            <Text style={styles.supportText}>Need help getting started?</Text>
+            <Text style={styles.supportText}>
+              <Link href={`mailto:${foodstudioConfig.supportEmail}`} style={styles.supportLink}>
+                {foodstudioConfig.supportEmail}
+              </Link>
+            </Text>
+          </Section>
+
+          {/* Download App Section */}
+          <Section style={styles.downloadSection}>
+            <Text style={styles.downloadText}>Get the FoodStudio app</Text>
+            <div style={styles.badgeContainer}>
+              <Link href={foodstudioConfig.appStoreUrl} style={styles.badge}>
+                <Img
+                  src={foodstudioConfig.appStoreBadgeUrl}
+                  width="120"
+                  height="40"
+                  alt="Download on the App Store"
+                />
+              </Link>
+              <Link href={foodstudioConfig.playStoreUrl} style={styles.badge}>
+                <Img
+                  src={foodstudioConfig.playStoreBadgeUrl}
+                  width="135"
+                  height="40"
+                  alt="Get it on Google Play"
+                />
+              </Link>
+            </div>
+          </Section>
+
+          {/* Footer */}
+          <Section style={styles.footer}>
+            <Img
+              src={foodstudioConfig.logoUrl}
+              width="80"
+              height="auto"
+              alt="FoodStudio"
+              style={styles.footerLogo}
+            />
+            <Text style={styles.footerText}>
+              © {new Date().getFullYear()} {foodstudioConfig.companyName}. All rights reserved.
+            </Text>
+            <Text style={styles.footerText}>
+              You received this email because you signed up for FoodStudio.
+            </Text>
+            <Text style={styles.footerText}>
+              <Link href={`${foodstudioConfig.appUrl}/privacy`} style={styles.footerLink}>
+                Privacy Policy
+              </Link>
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+export default WelcomeEmail;

package/src/index.ts

@@ -3,3 +3,6 @@ export * from "./shared/index.js";
 
 // Modelfy emails
 export * as modelfy from "./modelfy/index.js";
+
+// FoodStudio emails
+export * as foodstudio from "./foodstudio/index.js";

package/src/modelfy/index.ts

@@ -6,12 +6,22 @@ import {
 } from "./templates/PromoSubscriptionEmail.js";
 import { GrantCreditsEmail, type GrantCreditsEmailProps } from "./templates/GrantCreditsEmail.js";
 import { WelcomeEmail, type WelcomeEmailProps } from "./templates/WelcomeEmail.js";
+import {
+  FeedbackRequestEmail,
+  type FeedbackRequestEmailProps,
+} from "./templates/FeedbackRequestEmail.js";
 
 // Re-export types
-export type { OtpEmailProps, PromoSubscriptionEmailProps, GrantCreditsEmailProps, WelcomeEmailProps };
+export type {
+  OtpEmailProps,
+  PromoSubscriptionEmailProps,
+  GrantCreditsEmailProps,
+  WelcomeEmailProps,
+  FeedbackRequestEmailProps,
+};
 
 // Re-export components for preview
-export { OtpEmail, PromoSubscriptionEmail, GrantCreditsEmail, WelcomeEmail };
+export { OtpEmail, PromoSubscriptionEmail, GrantCreditsEmail, WelcomeEmail, FeedbackRequestEmail };
 
 // Render functions
 export interface RenderResult {
@@ -69,3 +79,16 @@ export async function renderWelcomeEmail(
     text,
   };
 }
+
+export async function renderFeedbackRequestEmail(
+  props: FeedbackRequestEmailProps
+): Promise<RenderResult> {
+  const html = await render(FeedbackRequestEmail(props));
+  const text = await render(FeedbackRequestEmail(props), { plainText: true });
+
+  return {
+    subject: "We'd love your feedback on Modelfy",
+    html,
+    text,
+  };
+}