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/bodyweight-goal-reached.tsx CHANGED Viewed

@@ -1,18 +1,17 @@
-import React from "react";
+import * as React from "react";
+import { Section, Text, Row, Column } 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,
+  PrimaryButton,
+  DiscordButton,
+  colors,
+} from "../components";
 interface BodyweightGoalReachedEmailProps {
   userName: string;
@@ -23,20 +22,18 @@ interface BodyweightGoalReachedEmailProps {
   weightUnit: "kg" | "lbs";
   timeToGoal?: string;
   progressUrl: string;
-  websiteUrl: string;
+  websiteUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const BodyweightGoalReachedEmail = ({
-  userName,
-  goalType,
-  startWeight,
-  currentWeight,
-  goalWeight,
-  weightUnit,
-  timeToGoal,
-  progressUrl,
+  userName = "Alex",
+  goalType = "loss",
+  startWeight = 185,
+  currentWeight = 170,
+  goalWeight = 170,
+  weightUnit = "lbs",
+  timeToGoal = "12 weeks",
+  progressUrl = "tracked://bodyweight",
   websiteUrl = "https://tracked.gg",
 }: BodyweightGoalReachedEmailProps) => {
   const weightChange = Math.abs(currentWeight - startWeight);
@@ -56,341 +53,196 @@ export const BodyweightGoalReachedEmail = ({
   };
   return (
-    <Html>
-      <Head>
-        <meta name="color-scheme" content="light only" />
-        <meta name="supported-color-schemes" content="light only" />
-      </Head>
-      <Preview>Congratulations! You've reached your bodyweight goal 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: "64px", margin: "0" }}>🎉</Text>
-            </Section>
-            <Text style={heading}>Goal Achieved!</Text>
-            <Text style={celebrationText}>{getGoalMessage()}</Text>
-            <Section style={statsBox}>
-              <Text style={statsHeading}>Your Achievement:</Text>
-              <Row>
-                <Column>
-                  <Text style={statsLabel}>Starting Weight</Text>
-                  <Text style={statsValue}>
-                    {startWeight} {weightUnit}
-                  </Text>
-                </Column>
-                <Column>
-                  <Text style={statsLabel}>Current Weight</Text>
-                  <Text style={statsValue}>
-                    {currentWeight} {weightUnit}
-                  </Text>
-                </Column>
-                <Column>
-                  <Text style={statsLabel}>Goal Weight</Text>
-                  <Text style={statsValue}>
-                    {goalWeight} {weightUnit}
-                  </Text>
-                </Column>
-              </Row>
-              <Section style={changeBox}>
-                <Text style={changeText}>
-                  You've {changeDirection} {weightChange.toFixed(1)} {weightUnit}
-                  {timeToGoal && ` in ${timeToGoal}`}!
-                </Text>
-              </Section>
-            </Section>
-            <Text style={paragraph}>
-              Congratulations, {userName}! This is a huge accomplishment that took
-              dedication, consistency, and hard work. You set a goal and achieved
-              it - that's something to be proud of!
+    <EmailLayout preview="Congratulations! You've reached your bodyweight goal on Tracked">
+      <EmailHeader />
+      <Section style={{ textAlign: "center" as const, margin: "24px 0" }}>
+        <Text style={{ fontSize: "64px", margin: "0" }}>🎉</Text>
+      </Section>
+      <Heading style={{ textAlign: "center" as const, fontSize: "32px" }}>
+        Goal Achieved!
+      </Heading>
+      <Text
+        style={{
+          color: colors.accent,
+          fontSize: "18px",
+          lineHeight: "26px",
+          textAlign: "center" as const,
+          marginBottom: "24px",
+        }}
+      >
+        {getGoalMessage()}
+      </Text>
+      <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: "16px",
+            textAlign: "center" as const,
+          }}
+        >
+          Your Achievement:
+        </Text>
+        <Row>
+          <Column>
+            <Text
+              style={{
+                color: colors.textMuted,
+                fontSize: "12px",
+                textAlign: "center" as const,
+                marginBottom: "4px",
+                textTransform: "uppercase" as const,
+              }}
+            >
+              Starting Weight
             </Text>
-            <div
+            <Text
               style={{
-                marginTop: "24px",
-                marginBottom: "24px",
-                textAlign: "left" as const,
+                color: colors.textPrimary,
+                fontSize: "20px",
+                fontWeight: "bold" as const,
+                textAlign: "center" as const,
               }}
             >
-              <a
-                href={progressUrl}
-                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={nextStepsBox}>
-              <Text style={nextStepsHeading}>What's Next?</Text>
-              <ul style={nextStepsList}>
-                <li style={nextStepItem}>
-                  Maintain your progress with consistent training
-                </li>
-                <li style={nextStepItem}>
-                  Set a new goal to continue your journey
-                </li>
-                <li style={nextStepItem}>
-                  Share your success with the Tracked community
-                </li>
-                <li style={nextStepItem}>
-                  Reflect on what worked and keep building on it
-                </li>
-              </ul>
-            </Section>
-            <Section style={motivationBox}>
-              <Text style={motivationText}>
-                "Success is the sum of small efforts repeated day in and day out."
-              </Text>
-              <Text style={{ ...motivationText, marginTop: "8px", fontStyle: "normal" as const }}>
-                You proved it - congratulations! 💪
-              </Text>
-            </Section>
-            <div
+              {startWeight} {weightUnit}
+            </Text>
+          </Column>
+          <Column>
+            <Text
               style={{
-                textAlign: "left" as const,
-                margin: "24px 0",
+                color: colors.textMuted,
+                fontSize: "12px",
+                textAlign: "center" as const,
+                marginBottom: "4px",
+                textTransform: "uppercase" as const,
               }}
             >
-              <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
+              Current Weight
             </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
+              style={{
+                color: colors.textPrimary,
+                fontSize: "20px",
+                fontWeight: "bold" as const,
+                textAlign: "center" as const,
+              }}
+            >
+              {currentWeight} {weightUnit}
             </Text>
-          </Section>
-        </Container>
-      </Body>
-    </Html>
+          </Column>
+          <Column>
+            <Text
+              style={{
+                color: colors.textMuted,
+                fontSize: "12px",
+                textAlign: "center" as const,
+                marginBottom: "4px",
+                textTransform: "uppercase" as const,
+              }}
+            >
+              Goal Weight
+            </Text>
+            <Text
+              style={{
+                color: colors.textPrimary,
+                fontSize: "20px",
+                fontWeight: "bold" as const,
+                textAlign: "center" as const,
+              }}
+            >
+              {goalWeight} {weightUnit}
+            </Text>
+          </Column>
+        </Row>
+        <Section
+          style={{
+            backgroundColor: colors.surfaceAlt,
+            padding: "12px 16px",
+            borderRadius: "6px",
+            marginTop: "16px",
+          }}
+        >
+          <Text
+            style={{
+              color: colors.accent,
+              fontSize: "16px",
+              fontWeight: "bold" as const,
+              textAlign: "center" as const,
+              margin: "0",
+            }}
+          >
+            You've {changeDirection} {weightChange.toFixed(1)} {weightUnit}
+            {timeToGoal && ` in ${timeToGoal}`}!
+          </Text>
+        </Section>
+      </Section>
+      <Paragraph>
+        Congratulations, {userName}! This is a huge accomplishment that took
+        dedication, consistency, and hard work. You set a goal and achieved it -
+        that's something to be proud of!
+      </Paragraph>
+      <PrimaryButton href={progressUrl}>View Your Progress</PrimaryButton>
+      <FeatureBox title="What's Next?">
+        <FeatureList
+          items={[
+            { title: "Maintain your progress with consistent training" },
+            { title: "Set a new goal to continue your journey" },
+            { title: "Share your success with the Tracked community" },
+            { title: "Reflect on what worked and keep building on it" },
+          ]}
+        />
+      </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",
+          }}
+        >
+          "Success is the sum of small efforts repeated day in and day out."
+        </Text>
+        <Text
+          style={{
+            color: colors.textMuted,
+            fontSize: "15px",
+            lineHeight: "22px",
+            marginTop: "8px",
+          }}
+        >
+          You proved it - congratulations! 💪
+        </Text>
+      </Section>
+      <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: "32px",
-  lineHeight: "40px",
-  fontWeight: "bold",
-  marginBottom: "8px",
-  textAlign: "center" as const,
-};
-const celebrationText = {
-  color: "#4ade80",
-  fontSize: "18px",
-  lineHeight: "26px",
-  textAlign: "center" as const,
-  marginBottom: "24px",
-};
-const statsBox = {
-  backgroundColor: "#1e293b",
-  padding: "20px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-  borderLeft: "4px solid #4ade80",
-};
-const statsHeading = {
-  color: "#4ade80",
-  fontSize: "16px",
-  fontWeight: "bold",
-  marginBottom: "16px",
-  textAlign: "center" as const,
-};
-const statsLabel = {
-  color: "#94a3b8",
-  fontSize: "12px",
-  textAlign: "center" as const,
-  marginBottom: "4px",
-  textTransform: "uppercase" as const,
-};
-const statsValue = {
-  color: "#ffffff",
-  fontSize: "20px",
-  fontWeight: "bold",
-  textAlign: "center" as const,
-};
-const changeBox = {
-  backgroundColor: "#0f172a",
-  padding: "12px 16px",
-  borderRadius: "6px",
-  marginTop: "16px",
-};
-const changeText = {
-  color: "#4ade80",
-  fontSize: "16px",
-  fontWeight: "bold",
-  textAlign: "center" as const,
-  margin: "0",
-};
-const nextStepsBox = {
-  backgroundColor: "#1e293b",
-  padding: "16px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-};
-const nextStepsHeading = {
-  color: "#ffffff",
-  fontSize: "16px",
-  fontWeight: "bold",
-  marginBottom: "12px",
-};
-const nextStepsList = {
-  margin: "0",
-  paddingLeft: "20px",
-};
-const nextStepItem = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "24px",
-  marginBottom: "8px",
-};
-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 footer = {
-  color: "#94a3b8", // slate-400 for subtle footer text
-  fontSize: "12px",
-  lineHeight: "16px",
-};
 export default BodyweightGoalReachedEmail;