@tracked/emails 0.2.4 → 0.2.7

package/src/emails/trial-expired.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { Section, Text } from "@react-email/components";
+import {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  Paragraph,
+  FeatureBox,
+  SmallText,
+  PrimaryButton,
+  DiscordButton,
+  colors,
+} from "../components/index.js";
+
+interface TrialExpiredEmailProps {
+  userName: string;
+  reactivateUrl: string;
+  websiteUrl?: string;
+}
+
+export const TrialExpiredEmail = ({
+  userName = "Coach",
+  reactivateUrl = "https://dashboard.tracked.gg/billing",
+  websiteUrl = "https://tracked.gg",
+}: TrialExpiredEmailProps) => {
+  return (
+    <EmailLayout preview="Your Tracked trial has ended">
+      <EmailHeader />
+
+      <Heading>Your Trial Has Ended</Heading>
+      <Paragraph>
+        Hi {userName}, your free trial of Tracked has expired. Your access to
+        the coaching dashboard has been paused, but don't worry — your data is
+        safe.
+      </Paragraph>
+
+      <FeatureBox title="Your data is preserved:">
+        <SmallText style={{ marginBottom: "4px" }}>
+          • All client profiles and workout history are saved
+        </SmallText>
+        <SmallText style={{ marginBottom: "4px" }}>
+          • Your workout templates and programs are intact
+        </SmallText>
+        <SmallText style={{ marginBottom: "4px" }}>
+          • Client progress data remains accessible when you return
+        </SmallText>
+        <SmallText>• Subscribe anytime to regain full access</SmallText>
+      </FeatureBox>
+
+      <Section
+        style={{
+          backgroundColor: colors.surface,
+          padding: "20px 24px",
+          borderRadius: "8px",
+          margin: "24px 0",
+          borderLeft: `4px solid ${colors.accent}`,
+        }}
+      >
+        <Text
+          style={{
+            color: colors.accent,
+            fontSize: "18px",
+            fontWeight: "bold" as const,
+            marginBottom: "8px",
+          }}
+        >
+          Ready to continue?
+        </Text>
+        <Text
+          style={{
+            color: colors.textSecondary,
+            fontSize: "14px",
+            lineHeight: "20px",
+            margin: "0 0 16px 0",
+          }}
+        >
+          Reactivate your account to pick up right where you left off. Your
+          clients are waiting.
+        </Text>
+        <PrimaryButton href={reactivateUrl}>Reactivate Now</PrimaryButton>
+      </Section>
+
+      <Paragraph>
+        If you decided Tracked isn't for you right now, we'd love to hear why.
+        Your feedback helps us build a better product for coaches like you.
+      </Paragraph>
+
+      <DiscordButton />
+
+      <EmailFooter websiteUrl={websiteUrl} />
+    </EmailLayout>
+  );
+};
+
+export default TrialExpiredEmail;

package/src/emails/trial-midpoint.tsx

@@ -0,0 +1,150 @@
+import * as React from "react";
+import { Section, Text } from "@react-email/components";
+import {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  Paragraph,
+  FeatureBox,
+  SmallText,
+  PrimaryButton,
+  DiscordButton,
+  colors,
+} from "../components/index.js";
+
+interface TrialMidpointEmailProps {
+  userName: string;
+  daysRemaining: number;
+  trialEndDate: string;
+  clientsAdded: number;
+  upgradeUrl: string;
+  websiteUrl?: string;
+}
+
+export const TrialMidpointEmail = ({
+  userName = "Coach",
+  daysRemaining = 7,
+  trialEndDate = "January 29, 2025",
+  clientsAdded = 0,
+  upgradeUrl = "https://dashboard.tracked.gg/billing",
+  websiteUrl = "https://tracked.gg",
+}: TrialMidpointEmailProps) => {
+  const hasClients = clientsAdded > 0;
+
+  return (
+    <EmailLayout preview={`${daysRemaining} days left in your Tracked trial`}>
+      <EmailHeader />
+
+      <Heading>You're Halfway Through Your Trial</Heading>
+
+      {hasClients ? (
+        <Paragraph>
+          Hi {userName}, you've added {clientsAdded}{" "}
+          {clientsAdded === 1 ? "client" : "clients"} to Tracked so far. You
+          have {daysRemaining} days left to explore everything the platform has
+          to offer before your trial ends on {trialEndDate}.
+        </Paragraph>
+      ) : (
+        <Paragraph>
+          Hi {userName}, you have {daysRemaining} days left in your free trial.
+          We noticed you haven't added any clients yet. Let us help you get
+          started.
+        </Paragraph>
+      )}
+
+      {!hasClients && (
+        <Section
+          style={{
+            backgroundColor: colors.surface,
+            padding: "16px 24px",
+            borderRadius: "8px",
+            margin: "24px 0",
+            borderLeft: `4px solid ${colors.accent}`,
+          }}
+        >
+          <Text
+            style={{
+              color: colors.accent,
+              fontSize: "14px",
+              fontWeight: "bold" as const,
+              marginBottom: "4px",
+              marginTop: "0",
+            }}
+          >
+            Quick Start Guide
+          </Text>
+          <SmallText style={{ marginBottom: "4px" }}>
+            1. Add your first client from the dashboard
+          </SmallText>
+          <SmallText style={{ marginBottom: "4px" }}>
+            2. Create a workout program or use a template
+          </SmallText>
+          <SmallText>3. Assign workouts and start tracking progress</SmallText>
+        </Section>
+      )}
+
+      <FeatureBox title="Features you might have missed:">
+        <SmallText style={{ marginBottom: "4px" }}>
+          • <strong>Workout Templates</strong> — Save time with reusable
+          programs
+        </SmallText>
+        <SmallText style={{ marginBottom: "4px" }}>
+          • <strong>Progress Photos</strong> — Track visual client
+          transformations
+        </SmallText>
+        <SmallText style={{ marginBottom: "4px" }}>
+          • <strong>Check-ins</strong> — Weekly accountability with your clients
+        </SmallText>
+        <SmallText>
+          • <strong>Analytics</strong> — See training trends and client
+          performance
+        </SmallText>
+      </FeatureBox>
+
+      <Section
+        style={{
+          backgroundColor: colors.surface,
+          padding: "20px 24px",
+          borderRadius: "8px",
+          margin: "24px 0",
+          borderLeft: `4px solid ${colors.accent}`,
+        }}
+      >
+        <Text
+          style={{
+            color: colors.accent,
+            fontSize: "16px",
+            fontWeight: "bold" as const,
+            marginBottom: "8px",
+          }}
+        >
+          Ready to upgrade?
+        </Text>
+        <Text
+          style={{
+            color: colors.textSecondary,
+            fontSize: "14px",
+            lineHeight: "20px",
+            margin: "0",
+          }}
+        >
+          Lock in your subscription now and never lose access to your client
+          data. Pricing is based on the number of active clients you manage.
+        </Text>
+        <PrimaryButton href={upgradeUrl}>View Pricing</PrimaryButton>
+      </Section>
+
+      <Paragraph>
+        Questions? Join our Discord community to connect with other coaches and
+        get tips on growing your coaching business.
+      </Paragraph>
+
+      <DiscordButton />
+
+      <EmailFooter websiteUrl={websiteUrl} />
+    </EmailLayout>
+  );
+};
+
+export default TrialMidpointEmail;

package/src/emails/trial-started.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  Paragraph,
+  FeatureBox,
+  SmallText,
+  PrimaryButton,
+  DiscordButton,
+} from "../components/index.js";
+
+interface TrialStartedEmailProps {
+  userName: string;
+  trialEndDate: string;
+  daysRemaining: number;
+  upgradeUrl: string;
+  websiteUrl?: string;
+}
+
+export const TrialStartedEmail = ({
+  userName = "Coach",
+  trialEndDate = "January 29, 2025",
+  daysRemaining = 14,
+  upgradeUrl = "https://dashboard.tracked.gg/billing",
+  websiteUrl = "https://tracked.gg",
+}: TrialStartedEmailProps) => {
+  return (
+    <EmailLayout preview="Welcome to your Tracked coaching trial">
+      <EmailHeader />
+
+      <Heading>Welcome to Your Free Trial</Heading>
+      <Paragraph>
+        Hi {userName}, your {daysRemaining}-day free trial of Tracked has
+        started. You have until {trialEndDate} to explore everything the
+        platform has to offer.
+      </Paragraph>
+
+      <FeatureBox title="What's included in your trial:">
+        <SmallText style={{ marginBottom: "4px" }}>
+          • Unlimited client management (up to 500 clients)
+        </SmallText>
+        <SmallText style={{ marginBottom: "4px" }}>
+          • Custom workout programming and templates
+        </SmallText>
+        <SmallText style={{ marginBottom: "4px" }}>
+          • Client progress tracking and analytics
+        </SmallText>
+        <SmallText style={{ marginBottom: "4px" }}>
+          • In-app messaging with clients
+        </SmallText>
+        <SmallText>• Full access to the coaching dashboard</SmallText>
+      </FeatureBox>
+
+      <Paragraph>
+        Ready to get started? Head to your dashboard to add your first clients
+        and start building your coaching business.
+      </Paragraph>
+
+      <PrimaryButton href={upgradeUrl}>Go to Dashboard</PrimaryButton>
+
+      <Paragraph style={{ marginTop: "24px" }}>
+        If you have any questions or need help getting set up, our team is here
+        for you. Join our Discord community to connect with other coaches.
+      </Paragraph>
+
+      <DiscordButton />
+
+      <EmailFooter websiteUrl={websiteUrl} />
+    </EmailLayout>
+  );
+};
+
+export default TrialStartedEmail;

package/src/emails/week-one-checkin.tsx

@@ -14,7 +14,7 @@ import {
   DiscordButton,
   TextLink,
   colors,
-} from "../components";
+} from "../components/index.js";
 
 interface WeekOneCheckinEmailProps {
   userName: string;

package/src/emails/weekly-progress-digest.tsx

@@ -11,7 +11,7 @@ import {
   colors,
   spacing,
   borderRadius,
-} from "../components";
+} from "../components/index.js";
 
 interface WeeklyProgressDigestEmailProps {
   userName: string;

package/src/emails/welcome.tsx

@@ -7,10 +7,9 @@ import {
   Paragraph,
   FeatureBox,
   FeatureList,
-  TipBox,
   PrimaryButton,
   DiscordButton,
-} from "../components";
+} from "../components/index.js";
 import { Img } from "@react-email/components";
 
 interface WelcomeEmailProps {

package/src/index.ts

@@ -16,6 +16,11 @@ import { NewFollowerEmail } from "./emails/new-follower.js";
 import { NpsSurveyEmail } from "./emails/nps-survey.js";
 import { SubscriptionCanceledEmail } from "./emails/subscription-canceled.js";
 import { SupportEmail } from "./emails/support-email.js";
+import { TrialConvertedEmail } from "./emails/trial-converted.js";
+import { TrialEndingSoonEmail } from "./emails/trial-ending-soon.js";
+import { TrialExpiredEmail } from "./emails/trial-expired.js";
+import { TrialMidpointEmail } from "./emails/trial-midpoint.js";
+import { TrialStartedEmail } from "./emails/trial-started.js";
 import { TeamInviteEmail } from "./emails/team-invite.js";
 import { TeamMemberRemovedEmail } from "./emails/team-member-removed-email.js";
 import { TrackedMagicLink } from "./emails/tracked-magic-link.js";
@@ -58,6 +63,11 @@ export {
   TeamMemberRemovedEmail,
   TrackedMagicLink,
   TrackedMagicLinkActivate,
+  TrialConvertedEmail,
+  TrialEndingSoonEmail,
+  TrialExpiredEmail,
+  TrialMidpointEmail,
+  TrialStartedEmail,
   WeeklyProgressDigestEmail,
   WeekOneCheckinEmail,
   WelcomeEmail,

package/src/utils/index.ts

@@ -8,6 +8,6 @@ export {
   isPrivateRelayEmail,
   isValidEmailFormat,
   shouldSendEmailTo,
-} from "./email-validation";
+} from "./email-validation.js";
 
-export { isAnonymousUsername, getSafeDisplayName } from "./username-validation";
+export { isAnonymousUsername, getSafeDisplayName } from "./username-validation.js";