npm - @tracked/emails - Versions diffs - 0.1.4 → 0.2.0 - Mend

@tracked/emails 0.1.4 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/emails/client-onboarded.d.ts +35 -0
package/dist/emails/client-onboarded.d.ts.map +1 -0
package/dist/emails/client-onboarded.js +152 -0
package/dist/emails/client-onboarded.js.map +1 -0
package/dist/emails/index.d.ts +1 -0
package/dist/emails/index.d.ts.map +1 -1
package/dist/emails/index.js +1 -0
package/dist/emails/index.js.map +1 -1
package/dist/emails/monthly-report.d.ts.map +1 -1
package/dist/emails/monthly-report.js +31 -47
package/dist/emails/monthly-report.js.map +1 -1
package/dist/index.d.ts +2 -2
package/dist/index.d.ts.map +1 -1
package/dist/index.js +2 -2
package/dist/index.js.map +1 -1
package/package.json +20 -20
package/src/components/content.tsx +351 -0
package/src/components/index.ts +44 -0
package/src/components/interactive.tsx +260 -0
package/src/components/layout.tsx +217 -0
package/src/components/tokens.ts +74 -0
package/src/components/typography.tsx +148 -0
package/src/emails/anniversary.tsx +133 -0
package/src/emails/app-review-request.tsx +100 -0
package/src/emails/bodyweight-goal-reached.tsx +202 -350
package/src/emails/client-inactive-alert.tsx +130 -0
package/src/emails/client-onboarded.tsx +272 -0
package/src/emails/coach-invite.tsx +67 -250
package/src/emails/coach-removed-client.tsx +36 -197
package/src/emails/direct-message.tsx +69 -227
package/src/emails/feature-discovery.tsx +82 -266
package/src/emails/first-workout-assigned.tsx +52 -238
package/src/emails/first-workout-completed.tsx +88 -294
package/src/emails/inactive-reengagement.tsx +81 -0
package/src/emails/index.tsx +1 -0
package/src/emails/monthly-report.tsx +195 -525
package/src/emails/new-follower.tsx +60 -238
package/src/emails/nps-survey.tsx +149 -0
package/src/emails/subscription-canceled.tsx +88 -294
package/src/emails/support-email.tsx +33 -67
package/src/emails/team-invite.tsx +47 -240
package/src/emails/team-member-removed-email.tsx +23 -218
package/src/emails/tracked-magic-link-activate.tsx +29 -237
package/src/emails/tracked-magic-link.tsx +31 -251
package/src/emails/week-one-checkin.tsx +108 -329
package/src/emails/weekly-progress-digest.tsx +248 -0
package/src/emails/welcome.tsx +58 -326
package/src/index.ts +19 -2
package/dist/emails/client-accepted-invitation.d.ts +0 -10
package/dist/emails/client-accepted-invitation.d.ts.map +0 -1
package/dist/emails/client-accepted-invitation.js +0 -99
package/dist/emails/client-accepted-invitation.js.map +0 -1
package/src/emails/client-accepted-invitation.tsx +0 -258

package/src/emails/first-workout-completed.tsx CHANGED Viewed

@@ -1,18 +1,18 @@
-import React from "react";
+import * as React from "react";
+import { Section, Text } from "@react-email/components";
 import {
-  Body,
-  Column,
-  Container,
-  Head,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Text,
-} from "@react-email/components";
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  Paragraph,
+  FeatureBox,
+  TipBox,
+  SmallText,
+  PrimaryButton,
+  DiscordButton,
+  colors,
+} from "../components";
 interface FirstWorkoutCompletedEmailProps {
   userName: string;
@@ -20,293 +20,87 @@ interface FirstWorkoutCompletedEmailProps {
   totalSets?: number;
   totalReps?: number;
   workoutHistoryUrl: string;
-  websiteUrl: string;
+  websiteUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const FirstWorkoutCompletedEmail = ({
-  userName,
-  workoutName,
-  totalSets,
-  totalReps,
-  workoutHistoryUrl,
+  userName = "Alex",
+  workoutName = "Push Day A",
+  totalSets = 18,
+  totalReps = 156,
+  workoutHistoryUrl = "tracked://history",
   websiteUrl = "https://tracked.gg",
 }: FirstWorkoutCompletedEmailProps) => {
   return (
-    <Html>
-      <Head>
-        <meta name="color-scheme" content="light only" />
-        <meta name="supported-color-schemes" content="light only" />
-      </Head>
-      <Preview>Congratulations on completing your first workout on Tracked!</Preview>
-      <Body style={main}>
-        <Container style={container}>
-          <Section style={box}>
-            <Row style={{ marginBottom: "8px" }}>
-              <Column style={{ width: "auto", verticalAlign: "middle" }}>
-                <Img src={`${baseUrl}`} width="28" height="28" alt="Tracked" />
-              </Column>
-              <Column
-                style={{
-                  width: "auto",
-                  verticalAlign: "middle",
-                  paddingLeft: "4px",
-                }}
-              >
-                <Text
-                  style={{
-                    fontSize: "28px",
-                    fontWeight: "900",
-                    fontFamily:
-                      "Raleway, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-                    color: "#020617",
-                    margin: "0",
-                    lineHeight: "32px",
-                    letterSpacing: "0.5px",
-                  }}
-                >
-                  TRACKED
-                </Text>
-              </Column>
-            </Row>
-            <Hr style={hr} />
-            <Section style={{ textAlign: "center" as const, margin: "24px 0" }}>
-              <Text style={{ fontSize: "48px", margin: "0" }}>🎉</Text>
-            </Section>
-            <Text style={heading}>First Workout Complete!</Text>
-            <Text style={paragraph}>
-              Congratulations, {userName}! You've just completed your first workout
-              on Tracked. This is the beginning of an amazing journey.
-            </Text>
-            <Section style={statsBox}>
-              <Text style={statsHeading}>Your First Workout:</Text>
-              <Text style={statsText}>
-                <strong>Workout:</strong> {workoutName}
-              </Text>
-              {totalSets !== undefined && (
-                <Text style={statsText}>
-                  <strong>Sets Completed:</strong> {totalSets}
-                </Text>
-              )}
-              {totalReps !== undefined && (
-                <Text style={statsText}>
-                  <strong>Total Reps:</strong> {totalReps}
-                </Text>
-              )}
-            </Section>
-            <Section style={motivationBox}>
-              <Text style={motivationText}>
-                "The secret of getting ahead is getting started." - Mark Twain
-              </Text>
-            </Section>
-            <Text style={paragraph}>
-              You've taken the first step towards your fitness goals. Keep showing
-              up, stay consistent, and watch yourself grow stronger every day.
-            </Text>
-            <div
-              style={{
-                marginTop: "24px",
-                marginBottom: "24px",
-                textAlign: "left" as const,
-              }}
-            >
-              <a
-                href={workoutHistoryUrl}
-                style={{
-                  backgroundColor: "#0f172a",
-                  borderRadius: "8px",
-                  fontSize: "16px",
-                  fontWeight: "bold",
-                  textDecoration: "none",
-                  padding: "12px 32px",
-                  display: "inline-block",
-                }}
-              >
-                <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                  View Your Progress
-                </span>
-              </a>
-            </div>
-            <Section style={tipBox}>
-              <Text style={tipHeading}>Pro Tip:</Text>
-              <Text style={tipText}>
-                Track every workout to see your progress over time. The data you
-                collect now will help you understand how far you've come in the
-                weeks and months ahead.
-              </Text>
-            </Section>
-            <div
-              style={{
-                textAlign: "left" as const,
-                margin: "24px 0",
-              }}
-            >
-              <a
-                href="https://www.discord.gg/trackedgg"
-                style={{
-                  backgroundColor: "#5865F2",
-                  borderRadius: "8px",
-                  fontSize: "16px",
-                  fontWeight: "bold",
-                  textDecoration: "none",
-                  padding: "12px 32px",
-                  display: "inline-block",
-                }}
-              >
-                <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                  Join our Discord Community
-                </span>
-              </a>
-            </div>
-            <Hr style={hr} />
-            <Text style={footer}>
-              Copyright © Tracked Training Platform Inc. <br /> 9101 Horne
-              Street, Vancouver, BC
-            </Text>
-            <Container>
-              <Link
-                href={`${websiteUrl}/terms`}
-                style={{ ...footer, paddingRight: 10 }}
-              >
-                Terms
-              </Link>
-              <Link style={{ ...footer, paddingRight: 10 }}> | </Link>
-              <Link
-                href={`${websiteUrl}/privacy`}
-                style={{ ...footer, paddingRight: 10 }}
-              >
-                Privacy
-              </Link>
-              <Link style={{ ...footer, paddingRight: 10 }}> | </Link>
-              <Link
-                href={`${websiteUrl}/support`}
-                style={{ ...footer, paddingRight: 10 }}
-              >
-                Support
-              </Link>
-            </Container>
-            <Text style={footer}>
-              This is a service notification by the Tracked Training Platform.
-            </Text>
-          </Section>
-        </Container>
-      </Body>
-    </Html>
+    <EmailLayout preview="Congratulations on completing your first workout on Tracked!">
+      <EmailHeader />
+      <Section style={{ textAlign: "center" as const, margin: "24px 0" }}>
+        <Text style={{ fontSize: "48px", margin: "0" }}>🎉</Text>
+      </Section>
+      <Heading style={{ textAlign: "center" as const }}>
+        First Workout Complete!
+      </Heading>
+      <Paragraph>
+        Congratulations, {userName}! You've just completed your first workout on
+        Tracked. This is the beginning of an amazing journey.
+      </Paragraph>
+      <FeatureBox title="Your First Workout:">
+        <SmallText>
+          <strong>Workout:</strong> {workoutName}
+        </SmallText>
+        {totalSets !== undefined && (
+          <SmallText style={{ marginTop: "4px" }}>
+            <strong>Sets Completed:</strong> {totalSets}
+          </SmallText>
+        )}
+        {totalReps !== undefined && (
+          <SmallText style={{ marginTop: "4px" }}>
+            <strong>Total Reps:</strong> {totalReps}
+          </SmallText>
+        )}
+      </FeatureBox>
+      <Section
+        style={{
+          padding: "16px 0 16px 20px",
+          margin: "24px 0",
+          borderLeft: `4px solid ${colors.accent}`,
+        }}
+      >
+        <Text
+          style={{
+            color: colors.textMuted,
+            fontSize: "15px",
+            lineHeight: "22px",
+            fontStyle: "italic" as const,
+            margin: "0",
+          }}
+        >
+          "The secret of getting ahead is getting started." - Mark Twain
+        </Text>
+      </Section>
+      <Paragraph>
+        You've taken the first step towards your fitness goals. Keep showing up,
+        stay consistent, and watch yourself grow stronger every day.
+      </Paragraph>
+      <PrimaryButton href={workoutHistoryUrl}>View Your Progress</PrimaryButton>
+      <TipBox title="Pro Tip">
+        Track every workout to see your progress over time. The data you collect
+        now will help you understand how far you've come in the weeks and months
+        ahead.
+      </TipBox>
+      <DiscordButton />
+      <EmailFooter websiteUrl={websiteUrl} />
+    </EmailLayout>
   );
 };
-const main = {
-  backgroundColor: "#020617", // slate-950
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
-};
-const container = {
-  backgroundColor: "#020617", // slate-950
-  margin: "0 auto",
-  padding: "20px 0 48px",
-  marginBottom: "64px",
-  borderRadius: "8px",
-};
-const box = {
-  padding: "0 24px",
-};
-const hr = {
-  borderColor: "#4ade80", // green-400
-  margin: "24px 0",
-  borderWidth: "1px",
-};
-const paragraph = {
-  color: "#ffffff", // white
-  fontSize: "16px",
-  lineHeight: "24px",
-  textAlign: "left" as const,
-};
-const heading = {
-  color: "#ffffff", // white
-  fontSize: "24px",
-  lineHeight: "32px",
-  fontWeight: "bold",
-  marginBottom: "16px",
-  textAlign: "center" as const,
-};
-const statsBox = {
-  backgroundColor: "#1e293b",
-  padding: "16px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-};
-const statsHeading = {
-  color: "#4ade80",
-  fontSize: "16px",
-  fontWeight: "bold",
-  marginBottom: "12px",
-};
-const statsText = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "24px",
-  marginBottom: "4px",
-};
-const motivationBox = {
-  backgroundColor: "transparent",
-  padding: "16px 0",
-  margin: "24px 0",
-  borderLeft: "4px solid #4ade80",
-  paddingLeft: "20px",
-};
-const motivationText = {
-  color: "#94a3b8",
-  fontSize: "15px",
-  lineHeight: "22px",
-  fontStyle: "italic" as const,
-};
-const tipBox = {
-  backgroundColor: "#1e293b",
-  padding: "16px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-};
-const tipHeading = {
-  color: "#4ade80",
-  fontSize: "14px",
-  fontWeight: "bold",
-  marginBottom: "8px",
-};
-const tipText = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "20px",
-};
-const footer = {
-  color: "#94a3b8", // slate-400 for subtle footer text
-  fontSize: "12px",
-  lineHeight: "16px",
-};
 export default FirstWorkoutCompletedEmail;

package/src/emails/inactive-reengagement.tsx ADDED Viewed

@@ -0,0 +1,81 @@
+import * as React from "react";
+import {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  Paragraph,
+  FeatureBox,
+  FeatureList,
+  PrimaryButton,
+  DiscordButton,
+} from "../components";
+interface InactiveReengagementEmailProps {
+  userName: string;
+  daysInactive: number;
+  appUrl: string;
+  websiteUrl?: string;
+  unsubscribeUrl?: string;
+}
+export const InactiveReengagementEmail = ({
+  userName = "Alex",
+  daysInactive = 21,
+  appUrl = "tracked://app",
+  websiteUrl = "https://tracked.gg",
+  unsubscribeUrl = "https://tracked.gg/unsubscribe",
+}: InactiveReengagementEmailProps) => {
+  const getMessage = () => {
+    if (daysInactive >= 30) {
+      return "It's been a while! Your fitness journey is waiting for you.";
+    } else if (daysInactive >= 14) {
+      return "We noticed you've been away. Ready to get back on track?";
+    } else {
+      return "Hey, we miss you! Your workout streak is waiting to be continued.";
+    }
+  };
+  return (
+    <EmailLayout preview={`We miss you, ${userName}! Come back to Tracked`}>
+      <EmailHeader />
+      <Heading>We Miss You!</Heading>
+      <Paragraph>
+        Hi {userName}, it's been {daysInactive} days since your last workout.{" "}
+        {getMessage()}
+      </Paragraph>
+      <FeatureBox title="Pick up where you left off:">
+        <FeatureList
+          items={[
+            {
+              title: "Your data is safe",
+              description: "All your workout history and progress is still here",
+            },
+            {
+              title: "Start fresh",
+              description: "Every day is a new opportunity to build consistency",
+            },
+            {
+              title: "Stay accountable",
+              description: "Track even quick workouts to maintain momentum",
+            },
+          ]}
+        />
+      </FeatureBox>
+      <PrimaryButton href={appUrl}>Log a Workout</PrimaryButton>
+      <Paragraph muted>
+        Remember: consistency beats perfection. Even a 10-minute session counts!
+      </Paragraph>
+      <DiscordButton />
+      <EmailFooter websiteUrl={websiteUrl} marketing unsubscribeUrl={unsubscribeUrl} />
+    </EmailLayout>
+  );
+};
+export default InactiveReengagementEmail;

package/src/emails/index.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+export * from "./client-onboarded";
 export * from "./support-email";
 export * from "./tracked-magic-link";
 export * from "./tracked-magic-link-activate";