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/direct-message.tsx CHANGED Viewed

@@ -1,18 +1,16 @@
-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,
+  SmallText,
+  PrimaryButton,
+  DiscordButton,
+  colors,
+} from "../components";
 interface DirectMessageEmailProps {
   recipientName: string;
@@ -20,17 +18,15 @@ interface DirectMessageEmailProps {
   senderUsername?: string;
   messagePreview: string;
   messageUrl: string;
-  websiteUrl: string;
+  websiteUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const DirectMessageEmail = ({
-  recipientName,
-  senderName,
-  senderUsername,
-  messagePreview,
-  messageUrl,
+  recipientName = "Alex",
+  senderName = "Jordan Smith",
+  senderUsername = "jordanfitness",
+  messagePreview = "Hey! Great workout today. I noticed you hit a new PR on bench press - that's awesome! Want to share your training program?",
+  messageUrl = "tracked://app",
   websiteUrl = "https://tracked.gg",
 }: DirectMessageEmailProps) => {
   const displayName = senderUsername
@@ -38,212 +34,58 @@ export const DirectMessageEmail = ({
     : senderName;
   return (
-    <Html>
-      <Head>
-        <meta name="color-scheme" content="light only" />
-        <meta name="supported-color-schemes" content="light only" />
-      </Head>
-      <Preview>New message from {senderName} 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} />
-            <Text style={heading}>You Have a New Message</Text>
-            <Text style={paragraph}>
-              Hi {recipientName}, {displayName} sent you a message on Tracked.
-            </Text>
-            <Section style={messageBox}>
-              <Text style={messageLabel}>Message Preview:</Text>
-              <Text style={messageText}>{messagePreview}</Text>
-            </Section>
-            <div
-              style={{
-                marginTop: "24px",
-                marginBottom: "24px",
-                textAlign: "left" as const,
-              }}
-            >
-              <a
-                href={messageUrl}
-                style={{
-                  backgroundColor: "#0f172a",
-                  borderRadius: "8px",
-                  fontSize: "16px",
-                  fontWeight: "bold",
-                  textDecoration: "none",
-                  padding: "12px 32px",
-                  display: "inline-block",
-                }}
-              >
-                <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                  View Message
-                </span>
-              </a>
-            </div>
-            <Text style={{ ...paragraph, fontSize: "14px", color: "#94a3b8" }}>
-              Open the Tracked app to read the full message and reply.
-            </Text>
-            <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={`New message from ${senderName} on Tracked`}>
+      <EmailHeader />
+      <Heading>You Have a New Message</Heading>
+      <Paragraph>
+        Hi {recipientName}, {displayName} sent you a message on Tracked.
+      </Paragraph>
+      <Section
+        style={{
+          backgroundColor: colors.surface,
+          padding: "16px 24px",
+          borderRadius: "8px",
+          margin: "24px 0",
+          borderLeft: `4px solid ${colors.accent}`,
+        }}
+      >
+        <Text
+          style={{
+            color: colors.textMuted,
+            fontSize: "12px",
+            fontWeight: "bold" as const,
+            textTransform: "uppercase" as const,
+            marginBottom: "8px",
+          }}
+        >
+          Message Preview:
+        </Text>
+        <Text
+          style={{
+            color: colors.textPrimary,
+            fontSize: "15px",
+            lineHeight: "22px",
+            fontStyle: "italic" as const,
+            margin: "0",
+          }}
+        >
+          {messagePreview}
+        </Text>
+      </Section>
+      <PrimaryButton href={messageUrl}>View Message</PrimaryButton>
+      <SmallText muted>
+        Open the Tracked app to read the full message and reply.
+      </SmallText>
+      <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",
-};
-const messageBox = {
-  backgroundColor: "#1e293b",
-  padding: "16px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-  borderLeft: "4px solid #4ade80",
-};
-const messageLabel = {
-  color: "#94a3b8",
-  fontSize: "12px",
-  fontWeight: "bold",
-  textTransform: "uppercase" as const,
-  marginBottom: "8px",
-};
-const messageText = {
-  color: "#ffffff",
-  fontSize: "15px",
-  lineHeight: "22px",
-  fontStyle: "italic" as const,
-};
-const footer = {
-  color: "#94a3b8", // slate-400 for subtle footer text
-  fontSize: "12px",
-  lineHeight: "16px",
-};
 export default DirectMessageEmail;

package/src/emails/feature-discovery.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,
+  FeatureList,
+  SmallText,
+  PrimaryButton,
+  DiscordButton,
+  colors,
+} from "../components";
 interface FeatureDiscoveryEmailProps {
   userName?: string;
@@ -21,10 +21,9 @@ interface FeatureDiscoveryEmailProps {
   featureBenefits?: string[];
   featureUrl?: string;
   websiteUrl?: string;
+  unsubscribeUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const FeatureDiscoveryEmail = ({
   userName = "Alex",
   featureName = "Progress Photos",
@@ -35,260 +34,77 @@ export const FeatureDiscoveryEmail = ({
     "Set reminders to take consistent progress photos",
     "Track multiple angles and body positions",
   ],
-  featureUrl = "https://tracked.gg/progress-photos",
+  featureUrl = "tracked://physique-photos",
   websiteUrl = "https://tracked.gg",
+  unsubscribeUrl,
 }: FeatureDiscoveryEmailProps) => {
   return (
-    <Html>
-      <Head>
-        <meta name="color-scheme" content="light only" />
-        <meta name="supported-color-schemes" content="light only" />
-      </Head>
-      <Preview>Discover {featureName} 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: "16px 0" }}>
-              <Text style={{ fontSize: "36px", margin: "0" }}>💡</Text>
-            </Section>
-            <Text style={heading}>Unlock More with Tracked</Text>
-            <Text style={paragraph}>
-              Hi {userName}, we noticed you haven't tried {featureName} yet - a
-              powerful feature that could take your training to the next level.
-            </Text>
-            <Section style={featureBox}>
-              <Text style={featureHeading}>{featureName}</Text>
-              <Text style={featureDescriptionStyle}>{featureDescription}</Text>
-            </Section>
-            {featureBenefits.length > 0 && (
-              <Section style={benefitsBox}>
-                <Text style={benefitsHeading}>Why you'll love it:</Text>
-                <ul style={benefitsList}>
-                  {featureBenefits.map((benefit, index) => (
-                    <li key={index} style={benefitItem}>
-                      {benefit}
-                    </li>
-                  ))}
-                </ul>
-              </Section>
-            )}
-            <div
-              style={{
-                marginTop: "24px",
-                marginBottom: "24px",
-                textAlign: "left" as const,
-              }}
-            >
-              <a
-                href={featureUrl}
-                style={{
-                  backgroundColor: "#0f172a",
-                  borderRadius: "8px",
-                  fontSize: "16px",
-                  fontWeight: "bold",
-                  textDecoration: "none",
-                  padding: "12px 32px",
-                  display: "inline-block",
-                }}
-              >
-                <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                  Try {featureName}
-                </span>
-              </a>
-            </div>
-            <Text style={{ ...paragraph, fontSize: "14px", color: "#94a3b8" }}>
-              We're constantly adding new features to help you reach your fitness
-              goals. Stay tuned for more updates!
-            </Text>
-            <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={`Discover ${featureName} on Tracked`}>
+      <EmailHeader />
+      <Section style={{ textAlign: "center" as const, margin: "16px 0" }}>
+        <Text style={{ fontSize: "36px", margin: "0" }}>💡</Text>
+      </Section>
+      <Heading style={{ textAlign: "center" as const }}>
+        Unlock More with Tracked
+      </Heading>
+      <Paragraph>
+        Hi {userName}, we noticed you haven't tried {featureName} yet - a
+        powerful feature that could take your training to the next level.
+      </Paragraph>
+      <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",
+          }}
+        >
+          {featureName}
+        </Text>
+        <Text
+          style={{
+            color: colors.textSecondary,
+            fontSize: "15px",
+            lineHeight: "22px",
+            margin: "0",
+          }}
+        >
+          {featureDescription}
+        </Text>
+      </Section>
+      {featureBenefits.length > 0 && (
+        <FeatureBox title="Why you'll love it:">
+          <FeatureList
+            items={featureBenefits.map((benefit) => ({ title: benefit }))}
+          />
+        </FeatureBox>
+      )}
+      <PrimaryButton href={featureUrl}>Try {featureName}</PrimaryButton>
+      <SmallText muted>
+        We're constantly adding new features to help you reach your fitness
+        goals. Stay tuned for more updates!
+      </SmallText>
+      <DiscordButton />
+      <EmailFooter websiteUrl={websiteUrl} marketing unsubscribeUrl={unsubscribeUrl} />
+    </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 featureBox = {
-  backgroundColor: "#1e293b",
-  padding: "20px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-  borderLeft: "4px solid #4ade80",
-};
-const featureHeading = {
-  color: "#4ade80",
-  fontSize: "18px",
-  fontWeight: "bold",
-  marginBottom: "8px",
-};
-const featureDescriptionStyle = {
-  color: "#e2e8f0",
-  fontSize: "15px",
-  lineHeight: "22px",
-};
-const benefitsBox = {
-  backgroundColor: "#1e293b",
-  padding: "16px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-};
-const benefitsHeading = {
-  color: "#ffffff",
-  fontSize: "16px",
-  fontWeight: "bold",
-  marginBottom: "12px",
-};
-const benefitsList = {
-  margin: "0",
-  paddingLeft: "20px",
-};
-const benefitItem = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "24px",
-  marginBottom: "8px",
-};
-const footer = {
-  color: "#94a3b8", // slate-400 for subtle footer text
-  fontSize: "12px",
-  lineHeight: "16px",
-};
 export default FeatureDiscoveryEmail;