@tracked/emails 0.1.4 → 0.2.0

package/src/emails/anniversary.tsx

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { Section, Text } from "@react-email/components";
+import {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  Paragraph,
+  PrimaryButton,
+  DiscordButton,
+  colors,
+  spacing,
+} from "../components";
+
+interface AnniversaryEmailProps {
+  userName: string;
+  yearsOnPlatform: number;
+  totalWorkouts?: number;
+  totalVolume?: string;
+  appUrl: string;
+  websiteUrl?: string;
+  unsubscribeUrl?: string;
+}
+
+export const AnniversaryEmail = ({
+  userName = "Alex",
+  yearsOnPlatform = 1,
+  totalWorkouts = 156,
+  totalVolume = "1,250,000 lbs",
+  appUrl = "tracked://bodyweight",
+  websiteUrl = "https://tracked.gg",
+  unsubscribeUrl = "https://tracked.gg/unsubscribe",
+}: AnniversaryEmailProps) => {
+  const yearText = yearsOnPlatform === 1 ? "1 Year" : `${yearsOnPlatform} Years`;
+
+  return (
+    <EmailLayout preview={`Happy ${yearText} Anniversary on Tracked!`}>
+      <EmailHeader />
+
+      <Heading>Happy {yearText} Anniversary!</Heading>
+      <Paragraph>
+        Congratulations {userName}! Today marks {yearsOnPlatform}{" "}
+        {yearsOnPlatform === 1 ? "year" : "years"} since you joined Tracked.
+        Thank you for being part of our community!
+      </Paragraph>
+
+      {(totalWorkouts || totalVolume) && (
+        <Section
+          style={{
+            backgroundColor: colors.surface,
+            padding: spacing.lg,
+            borderRadius: "8px",
+            margin: `${spacing.lg} 0`,
+            border: `1px solid ${colors.border}`,
+            textAlign: "center" as const,
+          }}
+        >
+          <Text
+            style={{
+              color: colors.accent,
+              fontSize: "14px",
+              fontWeight: "bold",
+              textTransform: "uppercase" as const,
+              letterSpacing: "0.5px",
+              margin: "0 0 16px 0",
+            }}
+          >
+            Your Journey So Far
+          </Text>
+          {totalWorkouts && (
+            <Text
+              style={{
+                color: colors.textPrimary,
+                fontSize: "32px",
+                fontWeight: "bold",
+                margin: "0 0 4px 0",
+              }}
+            >
+              {totalWorkouts.toLocaleString()}
+            </Text>
+          )}
+          {totalWorkouts && (
+            <Text
+              style={{
+                color: colors.textSecondary,
+                fontSize: "14px",
+                margin: "0 0 16px 0",
+              }}
+            >
+              workouts logged
+            </Text>
+          )}
+          {totalVolume && (
+            <>
+              <Text
+                style={{
+                  color: colors.textPrimary,
+                  fontSize: "32px",
+                  fontWeight: "bold",
+                  margin: "0 0 4px 0",
+                }}
+              >
+                {totalVolume}
+              </Text>
+              <Text
+                style={{
+                  color: colors.textSecondary,
+                  fontSize: "14px",
+                  margin: "0",
+                }}
+              >
+                total volume lifted
+              </Text>
+            </>
+          )}
+        </Section>
+      )}
+
+      <Paragraph>
+        Here's to another year of crushing goals and getting stronger. Keep up
+        the amazing work!
+      </Paragraph>
+
+      <PrimaryButton href={appUrl}>View Your Progress</PrimaryButton>
+
+      <DiscordButton />
+
+      <EmailFooter websiteUrl={websiteUrl} marketing unsubscribeUrl={unsubscribeUrl} />
+    </EmailLayout>
+  );
+};
+
+export default AnniversaryEmail;

package/src/emails/app-review-request.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { Section, Text } from "@react-email/components";
+import {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  Paragraph,
+  PrimaryButton,
+  SecondaryButton,
+  DiscordButton,
+  colors,
+  spacing,
+  borderRadius,
+} from "../components";
+
+interface AppReviewRequestEmailProps {
+  userName: string;
+  workoutsCompleted: number;
+  appStoreUrl?: string;
+  playStoreUrl?: string;
+  websiteUrl?: string;
+  unsubscribeUrl?: string;
+}
+
+export const AppReviewRequestEmail = ({
+  userName = "Alex",
+  workoutsCompleted = 50,
+  appStoreUrl = "https://apps.apple.com/app/tracked-training/id6450913418",
+  playStoreUrl = "https://play.google.com/store/apps/details?id=com.tracked.mobile",
+  websiteUrl = "https://tracked.gg",
+  unsubscribeUrl = "https://tracked.gg/unsubscribe",
+}: AppReviewRequestEmailProps) => {
+  return (
+    <EmailLayout preview={`You've completed ${workoutsCompleted} workouts! Share your experience`}>
+      <EmailHeader />
+
+      <Heading>You're Crushing It!</Heading>
+      <Paragraph>
+        Hi {userName}, you've completed <strong>{workoutsCompleted} workouts</strong> on
+        Tracked. That's an amazing achievement!
+      </Paragraph>
+
+      <Section
+        style={{
+          backgroundColor: colors.surface,
+          padding: spacing.lg,
+          borderRadius: borderRadius.md,
+          margin: `${spacing.lg} 0`,
+          border: `1px solid ${colors.border}`,
+          textAlign: "center" as const,
+        }}
+      >
+        <Text
+          style={{
+            color: colors.textPrimary,
+            fontSize: "48px",
+            fontWeight: "bold",
+            margin: "0",
+          }}
+        >
+          {workoutsCompleted}
+        </Text>
+        <Text
+          style={{
+            color: colors.textSecondary,
+            fontSize: "14px",
+            margin: "8px 0 0 0",
+          }}
+        >
+          workouts and counting
+        </Text>
+      </Section>
+
+      <Paragraph>
+        We'd love to hear what you think! A quick review helps other athletes
+        discover Tracked and helps us continue improving the app.
+      </Paragraph>
+
+      <Paragraph style={{ fontWeight: "600" }}>
+        Would you take 30 seconds to leave a review?
+      </Paragraph>
+
+      <PrimaryButton href={appStoreUrl}>Review on App Store</PrimaryButton>
+
+      <SecondaryButton href={playStoreUrl}>Review on Google Play</SecondaryButton>
+
+      <Paragraph muted style={{ textAlign: "center" as const }}>
+        Thank you for being part of the Tracked community. Your support means
+        everything to us!
+      </Paragraph>
+
+      <DiscordButton />
+
+      <EmailFooter websiteUrl={websiteUrl} marketing unsubscribeUrl={unsubscribeUrl} />
+    </EmailLayout>
+  );
+};
+
+export default AppReviewRequestEmail;