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

@tracked/emails 0.1.5 → 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 (50) 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/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 +198 -520
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/week-one-checkin.tsx CHANGED Viewed

@@ -1,353 +1,132 @@
-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,
+  FeatureList,
+  TipBox,
+  SmallText,
+  PrimaryButton,
+  DiscordButton,
+  TextLink,
+  colors,
+} from "../components";
 interface WeekOneCheckinEmailProps {
   userName: string;
   workoutsCompleted: number;
   appUrl: string;
   supportUrl?: string;
-  websiteUrl: string;
+  websiteUrl?: string;
+  unsubscribeUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const WeekOneCheckinEmail = ({
-  userName,
-  workoutsCompleted,
-  appUrl,
-  supportUrl,
+  userName = "Alex",
+  workoutsCompleted = 4,
+  appUrl = "tracked://app",
+  supportUrl = "https://tracked.gg/support",
   websiteUrl = "https://tracked.gg",
+  unsubscribeUrl = "https://tracked.gg/unsubscribe",
 }: WeekOneCheckinEmailProps) => {
   const isActive = workoutsCompleted > 0;
   return (
-    <Html>
-      <Head>
-        <meta name="color-scheme" content="light only" />
-        <meta name="supported-color-schemes" content="light only" />
-      </Head>
-      <Preview>How's your first week on Tracked going?</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} />
-            <Text style={heading}>Week One Check-In</Text>
-            {isActive ? (
-              <>
-                <Text style={paragraph}>
-                  Hi {userName}, you've been on Tracked for a week now and we
-                  wanted to check in!
-                </Text>
-                <Section style={statsBox}>
-                  <Text style={statsHeading}>Your First Week:</Text>
-                  <Text style={statsText}>
-                    <strong>Workouts Logged:</strong> {workoutsCompleted}
-                  </Text>
-                  <Text style={{ ...statsText, marginTop: "8px" }}>
-                    {workoutsCompleted >= 3
-                      ? "🔥 Great start! You're building strong habits."
-                      : "💪 Good progress! Try to aim for 3-4 workouts per week."}
-                  </Text>
-                </Section>
-                <Text style={paragraph}>
-                  Consistency is the key to reaching your fitness goals. Keep up
-                  the momentum and remember - every workout counts!
-                </Text>
-              </>
-            ) : (
-              <>
-                <Text style={paragraph}>
-                  Hi {userName}, you joined Tracked a week ago, and we noticed you
-                  haven't logged your first workout yet.
-                </Text>
-                <Section style={encouragementBox}>
-                  <Text style={encouragementHeading}>Getting Started is Easy:</Text>
-                  <ul style={featureList}>
-                    <li style={featureItem}>
-                      Open the app and tap the "+" button
-                    </li>
-                    <li style={featureItem}>
-                      Select your exercises or create a custom workout
-                    </li>
-                    <li style={featureItem}>
-                      Track your sets, reps, and weight as you go
-                    </li>
-                    <li style={featureItem}>
-                      Complete your workout and see your progress!
-                    </li>
-                  </ul>
-                </Section>
-                <Text style={paragraph}>
-                  The hardest part is getting started. Once you log that first
-                  workout, you'll be on your way to building lasting fitness habits.
-                </Text>
-              </>
-            )}
-            <div
-              style={{
-                marginTop: "24px",
-                marginBottom: "24px",
-                textAlign: "left" as const,
-              }}
-            >
-              <a
-                href={appUrl}
-                style={{
-                  backgroundColor: "#0f172a",
-                  borderRadius: "8px",
-                  fontSize: "16px",
-                  fontWeight: "bold",
-                  textDecoration: "none",
-                  padding: "12px 32px",
-                  display: "inline-block",
-                }}
-              >
-                <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                  {isActive ? "Continue Your Journey" : "Log Your First Workout"}
-                </span>
-              </a>
-            </div>
-            <Section style={tipBox}>
-              <Text style={tipHeading}>Need Help?</Text>
-              <Text style={tipText}>
-                Our support team is here to help you get the most out of Tracked.
-                {supportUrl && (
-                  <>
-                    {" "}
-                    <Link
-                      href={supportUrl}
-                      style={{ color: "#4ade80", textDecoration: "underline" }}
-                    >
-                      Contact us
-                    </Link>{" "}
-                    anytime with questions.
-                  </>
-                )}
-              </Text>
-            </Section>
-            <div
+    <EmailLayout preview="How's your first week on Tracked going?">
+      <EmailHeader />
+      <Heading>Week One Check-In</Heading>
+      {isActive ? (
+        <>
+          <Paragraph>
+            Hi {userName}, you've been on Tracked for a week now and we wanted
+            to check in!
+          </Paragraph>
+          <Section
+            style={{
+              backgroundColor: colors.surface,
+              padding: "16px 24px",
+              borderRadius: "8px",
+              margin: "24px 0",
+              borderLeft: `4px solid ${colors.accent}`,
+            }}
+          >
+            <Text
               style={{
-                textAlign: "left" as const,
-                margin: "24px 0",
+                color: colors.accent,
+                fontSize: "16px",
+                fontWeight: "bold" as const,
+                marginBottom: "12px",
               }}
             >
-              <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.
+              Your First Week:
             </Text>
+            <SmallText>
+              <strong>Workouts Logged:</strong> {workoutsCompleted}
+            </SmallText>
+            <SmallText style={{ marginTop: "8px" }}>
+              {workoutsCompleted >= 3
+                ? "Great start! You're building strong habits."
+                : "Good progress! Try to aim for 3-4 workouts per week."}
+            </SmallText>
           </Section>
-        </Container>
-      </Body>
-    </Html>
-  );
-};
-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",
-};
-const statsBox = {
-  backgroundColor: "#1e293b",
-  padding: "16px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-  borderLeft: "4px solid #4ade80",
-};
-const statsHeading = {
-  color: "#4ade80",
-  fontSize: "16px",
-  fontWeight: "bold",
-  marginBottom: "12px",
-};
-const statsText = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "24px",
-  marginBottom: "4px",
-};
-const encouragementBox = {
-  backgroundColor: "#1e293b",
-  padding: "16px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-};
-const encouragementHeading = {
-  color: "#ffffff",
-  fontSize: "16px",
-  fontWeight: "bold",
-  marginBottom: "12px",
-};
-const featureList = {
-  margin: "0",
-  paddingLeft: "20px",
-};
-const featureItem = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "24px",
-  marginBottom: "8px",
-};
-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",
+          <Paragraph>
+            Consistency is the key to reaching your fitness goals. Keep up the
+            momentum and remember - every workout counts!
+          </Paragraph>
+        </>
+      ) : (
+        <>
+          <Paragraph>
+            Hi {userName}, you joined Tracked a week ago, and we noticed you
+            haven't logged your first workout yet.
+          </Paragraph>
+          <FeatureBox title="Getting Started is Easy:">
+            <FeatureList
+              items={[
+                { title: 'Open the app and tap the "+" button' },
+                { title: "Select your exercises or create a custom workout" },
+                { title: "Track your sets, reps, and weight as you go" },
+                { title: "Complete your workout and see your progress!" },
+              ]}
+            />
+          </FeatureBox>
+          <Paragraph>
+            The hardest part is getting started. Once you log that first
+            workout, you'll be on your way to building lasting fitness habits.
+          </Paragraph>
+        </>
+      )}
+      <PrimaryButton href={appUrl}>
+        {isActive ? "Continue Your Journey" : "Log Your First Workout"}
+      </PrimaryButton>
+      <TipBox title="Need Help?">
+        Our support team is here to help you get the most out of Tracked.
+        {supportUrl && (
+          <>
+            {" "}
+            <TextLink href={supportUrl}>Contact us</TextLink> anytime with
+            questions.
+          </>
+        )}
+      </TipBox>
+      <DiscordButton />
+      <EmailFooter websiteUrl={websiteUrl} marketing unsubscribeUrl={unsubscribeUrl} />
+    </EmailLayout>
+  );
 };
 export default WeekOneCheckinEmail;