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

package/src/email/templates/quota-warning.tsx

@@ -0,0 +1,118 @@
+import { Button, Text } from "@react-email/components";
+import * as React from "react";
+import { BaseLayout } from "./base-layout";
+
+// `isExceeded` switches between the 80% warning and the used-up variant.
+// `used` and `allowance` arrive formatted: the plan allowance is money in
+// the deployment's billing currency, and the sender owns the formatting.
+
+export interface QuotaWarningEmailProps {
+  workspaceName: string;
+  percentageUsed: number;
+  used: string;
+  allowance: string;
+  upgradeUrl: string;
+  isExceeded: boolean;
+}
+
+export function QuotaWarningEmail({
+  workspaceName,
+  percentageUsed,
+  used,
+  allowance,
+  upgradeUrl,
+  isExceeded,
+}: QuotaWarningEmailProps) {
+  const text = {
+    previewExceeded: "Your monthly allowance is used up",
+    previewWarning: `You've used ${percentageUsed}% of your monthly allowance`,
+    headingExceeded: "Allowance Used Up",
+    headingWarning: "Allowance Warning",
+    bodyExceeded1: "Your workspace",
+    bodyExceeded2: "has used all of its",
+    bodyExceeded3: "monthly allowance.",
+    warningText:
+      "AI features are currently restricted until your allowance resets or you upgrade.",
+    bodyWarning1: "Your workspace",
+    bodyWarning2: "has used",
+    bodyWarning3: "of its",
+    bodyWarning4: "monthly allowance",
+    button: "Upgrade Plan",
+    note: "Your allowance resets at the start of next month.",
+  };
+
+  return (
+    <BaseLayout
+      preview={isExceeded ? text.previewExceeded : text.previewWarning}
+    >
+      <Text style={headingStyle}>
+        {isExceeded ? text.headingExceeded : text.headingWarning}
+      </Text>
+
+      {isExceeded ? (
+        <>
+          <Text style={bodyTextStyle}>
+            {text.bodyExceeded1} &lsquo;{workspaceName}&rsquo;{" "}
+            {text.bodyExceeded2} {allowance} {text.bodyExceeded3}
+          </Text>
+          <Text style={warningTextStyle}>{text.warningText}</Text>
+        </>
+      ) : (
+        <Text style={bodyTextStyle}>
+          {text.bodyWarning1} &lsquo;{workspaceName}&rsquo; {text.bodyWarning2}{" "}
+          {used} {text.bodyWarning3} {allowance} {text.bodyWarning4} (
+          {percentageUsed}%).
+        </Text>
+      )}
+
+      <Button href={upgradeUrl} 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 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",
+};
+
+const noteStyle: React.CSSProperties = {
+  color: "#71717a",
+  fontSize: "13px",
+  lineHeight: "20px",
+  marginTop: "20px",
+};

package/src/email/templates/subscription-confirmed.tsx

@@ -0,0 +1,91 @@
+import { Button, Text } from "@react-email/components";
+import * as React from "react";
+import { BaseLayout } from "./base-layout";
+
+export interface SubscriptionConfirmedEmailProps {
+  workspaceName: string;
+  planName: string;
+  amount: string;
+  dashboardUrl: string;
+}
+
+export function SubscriptionConfirmedEmail({
+  workspaceName,
+  planName,
+  amount,
+  dashboardUrl,
+}: SubscriptionConfirmedEmailProps) {
+  const text = {
+    preview: `Subscription confirmed for ${workspaceName}`,
+    heading: "Subscription Confirmed",
+    body1: "Your workspace",
+    body2: "is now on the",
+    body3: "plan.",
+    amountLabel: "Amount:",
+    perMonth: "/month",
+    button: "Go to Dashboard",
+    note: "You can manage your subscription from the billing settings.",
+  };
+
+  return (
+    <BaseLayout preview={text.preview}>
+      <Text style={headingStyle}>{text.heading}</Text>
+      <Text style={bodyTextStyle}>
+        {text.body1} &lsquo;{workspaceName}&rsquo; {text.body2}{" "}
+        <strong>{planName}</strong> {text.body3}
+      </Text>
+      <Text style={detailStyle}>
+        {text.amountLabel} {amount}
+        {text.perMonth}
+      </Text>
+      <Button href={dashboardUrl} 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 detailStyle: React.CSSProperties = {
+  color: "#18181b",
+  fontSize: "15px",
+  fontWeight: 600,
+  lineHeight: "24px",
+  margin: "0 0 16px",
+};
+
+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/trial-expiry.tsx

@@ -0,0 +1,124 @@
+import { Button, Text } from "@react-email/components";
+import * as React from "react";
+import { BaseLayout } from "./base-layout";
+
+// `daysRemaining` switches between the reminder and expired variants.
+
+export interface TrialExpiryEmailProps {
+  workspaceName: string;
+  expiryDate: string;
+  daysRemaining: number;
+  upgradeUrl: string;
+}
+
+export function TrialExpiryEmail({
+  workspaceName,
+  expiryDate,
+  daysRemaining,
+  upgradeUrl,
+}: TrialExpiryEmailProps) {
+  const isExpired = daysRemaining <= 0;
+  const isUrgent = daysRemaining <= 1 && daysRemaining > 0;
+
+  const days = `${daysRemaining} day${daysRemaining === 1 ? "" : "s"}`;
+  const text = {
+    previewExpired: "Your trial has ended",
+    previewExpiring: `Your trial ends in ${days}`,
+    headingExpired: "Your Trial Has Ended",
+    headingExpiring: `Your Trial Ends in ${days}`,
+    buttonExpired: "Choose a Plan",
+    buttonUpgrade: "Upgrade Now",
+  };
+
+  return (
+    <BaseLayout
+      preview={isExpired ? text.previewExpired : text.previewExpiring}
+    >
+      <Text style={headingStyle}>
+        {isExpired ? text.headingExpired : text.headingExpiring}
+      </Text>
+
+      {isExpired ? (
+        <>
+          <Text style={bodyTextStyle}>
+            The trial for &lsquo;{workspaceName}&rsquo; has ended, and the
+            workspace is back on its plan&rsquo;s limits. All your data has been
+            preserved.
+          </Text>
+          <Text style={bodyTextStyle}>
+            Upgrade to restore what the trial included.
+          </Text>
+        </>
+      ) : (
+        <>
+          <Text style={bodyTextStyle}>
+            The trial for &lsquo;{workspaceName}&rsquo; ends on{" "}
+            <strong>{expiryDate}</strong>. After that the workspace goes back to
+            its plan&rsquo;s limits; all your data will be preserved.
+          </Text>
+          {isUrgent && (
+            <Text style={urgentTextStyle}>
+              Upgrade today to keep what the trial includes.
+            </Text>
+          )}
+          <Text style={secondaryTextStyle}>
+            No action is needed if the current plan is enough for you.
+          </Text>
+        </>
+      )}
+
+      <Button href={upgradeUrl} style={buttonStyle}>
+        {isExpired ? text.buttonExpired : text.buttonUpgrade}
+      </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 urgentTextStyle: React.CSSProperties = {
+  color: "#dc2626",
+  fontSize: "16px",
+  fontWeight: 700,
+  lineHeight: "24px",
+  margin: "12px 0",
+  padding: "12px",
+  backgroundColor: "#fef2f2",
+  borderRadius: "6px",
+  border: "1px solid #fecaca",
+};
+
+const secondaryTextStyle: React.CSSProperties = {
+  color: "#71717a",
+  fontSize: "14px",
+  lineHeight: "20px",
+  margin: "12px 0 0",
+  fontStyle: "italic",
+};
+
+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: "16px",
+};

package/src/email/templates/trial-warning.tsx

@@ -0,0 +1,104 @@
+import { Button, Text } from "@react-email/components";
+import * as React from "react";
+import { BaseLayout } from "./base-layout";
+
+// `isDepleted` switches between the low-credit and depleted variants.
+
+export interface TrialWarningEmailProps {
+  workspaceName: string;
+  creditsRemaining: number;
+  totalCredits: number;
+  percentageRemaining: number;
+  upgradeUrl: string;
+  isDepleted: boolean;
+}
+
+export function TrialWarningEmail({
+  workspaceName,
+  creditsRemaining,
+  totalCredits,
+  percentageRemaining,
+  upgradeUrl,
+  isDepleted,
+}: TrialWarningEmailProps) {
+  const text = {
+    previewDepleted: "Your trial credits are depleted",
+    previewWarning: "Your trial credits are running low",
+    headingDepleted: "Trial Credits Depleted",
+    headingWarning: "Trial Credits Running Low",
+    bodyDepleted1: "Your workspace",
+    bodyDepleted2: "has used all trial credits.",
+    warningText: "Subscribe to a plan to continue using AI features.",
+    bodyWarning1: "Your workspace",
+    bodyWarning2: "has",
+    bodyWarning3: "trial credits remaining",
+    button: "Subscribe Now",
+  };
+
+  return (
+    <BaseLayout
+      preview={isDepleted ? text.previewDepleted : text.previewWarning}
+    >
+      <Text style={headingStyle}>
+        {isDepleted ? text.headingDepleted : text.headingWarning}
+      </Text>
+
+      {isDepleted ? (
+        <>
+          <Text style={bodyTextStyle}>
+            {text.bodyDepleted1} &lsquo;{workspaceName}&rsquo;{" "}
+            {text.bodyDepleted2}
+          </Text>
+          <Text style={warningTextStyle}>{text.warningText}</Text>
+        </>
+      ) : (
+        <Text style={bodyTextStyle}>
+          {text.bodyWarning1} &lsquo;{workspaceName}&rsquo; {text.bodyWarning2}{" "}
+          {creditsRemaining.toLocaleString()} / {totalCredits.toLocaleString()}{" "}
+          {text.bodyWarning3} ({percentageRemaining}%).
+        </Text>
+      )}
+
+      <Button href={upgradeUrl} 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",
+};

package/src/email/templates/verify-email.tsx

@@ -0,0 +1,72 @@
+import { Button, Text } from "@react-email/components";
+import * as React from "react";
+import { BaseLayout } from "./base-layout";
+
+export interface VerifyEmailEmailProps {
+  userName: string;
+  verificationUrl: string;
+}
+
+export function VerifyEmailEmail({
+  userName,
+  verificationUrl,
+}: VerifyEmailEmailProps) {
+  const text = {
+    preview: "Verify your email address",
+    heading: "Verify your email",
+    greeting: "Hi",
+    body: "Please verify your email address by clicking the button below.",
+    button: "Verify Email",
+    note: "This link expires in 24 hours. If you didn't create an account, 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={verificationUrl} 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/welcome.tsx

@@ -0,0 +1,64 @@
+import { Button, Text } from "@react-email/components";
+import * as React from "react";
+import { emailBrand } from "../brand";
+import { BaseLayout } from "./base-layout";
+
+export interface WelcomeEmailProps {
+  userName: string;
+  dashboardUrl: string;
+}
+
+export function WelcomeEmail({ userName, dashboardUrl }: WelcomeEmailProps) {
+  const { name } = emailBrand();
+  const text = {
+    preview: name
+      ? `Welcome to ${name}, ${userName}!`
+      : `Welcome, ${userName}!`,
+    heading: name ? `Welcome to ${name}` : "Welcome",
+    greeting: "Hi",
+    body: "Thanks for signing up! You're all set to start using AI-powered tools to boost your productivity.",
+    button: "Go to Dashboard",
+  };
+
+  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={dashboardUrl} 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 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",
+};

package/src/email/templates/workspace-invitation.tsx

@@ -0,0 +1,105 @@
+import { Button, Section, Text } from "@react-email/components";
+import * as React from "react";
+import { BaseLayout } from "./base-layout";
+
+export interface WorkspaceInvitationEmailProps {
+  inviterName: string;
+  workspaceName: string;
+  role: string;
+  acceptUrl: string;
+  declineUrl: string;
+}
+
+export function WorkspaceInvitationEmail({
+  inviterName,
+  workspaceName,
+  role,
+  acceptUrl,
+  declineUrl,
+}: WorkspaceInvitationEmailProps) {
+  const text = {
+    preview: `${inviterName} invited you to join ${workspaceName}`,
+    heading: "You're invited!",
+    body: "has invited you to join the workspace",
+    as: "as a",
+    invitedYou: "",
+    acceptButton: "Accept Invitation",
+    declineButton: "Decline",
+    note: "This invitation expires in 7 days.",
+  };
+
+  return (
+    <BaseLayout preview={text.preview}>
+      <Text style={headingStyle}>{text.heading}</Text>
+      <Text style={bodyTextStyle}>
+        <strong>{inviterName}</strong> {text.body}{" "}
+        <strong>&lsquo;{workspaceName}&rsquo;</strong> {text.as}{" "}
+        <strong>{role}</strong>
+        {text.invitedYou ? ` ${text.invitedYou}` : ""}.
+      </Text>
+      <Section style={buttonGroupStyle}>
+        <Button href={acceptUrl} style={acceptButtonStyle}>
+          {text.acceptButton}
+        </Button>
+        <Button href={declineUrl} style={declineButtonStyle}>
+          {text.declineButton}
+        </Button>
+      </Section>
+      <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 buttonGroupStyle: React.CSSProperties = {
+  marginTop: "8px",
+};
+
+const acceptButtonStyle: 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,
+  marginRight: "12px",
+};
+
+const declineButtonStyle: React.CSSProperties = {
+  backgroundColor: "transparent",
+  border: "1px solid #d4d4d8",
+  borderRadius: "6px",
+  color: "#71717a",
+  display: "inline-block",
+  fontSize: "15px",
+  fontWeight: 600,
+  lineHeight: "100%",
+  padding: "12px 24px",
+  textDecoration: "none",
+  textAlign: "center" as const,
+};
+
+const noteStyle: React.CSSProperties = {
+  color: "#71717a",
+  fontSize: "13px",
+  lineHeight: "20px",
+  marginTop: "20px",
+};