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/subscription-canceled.tsx CHANGED Viewed

@@ -1,311 +1,105 @@
-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,
+  SmallText,
+  PrimaryButton,
+  SecondaryButton,
+  DiscordButton,
+  colors,
+} from "../components";
 interface SubscriptionCanceledEmailProps {
   userName: string;
   cancellationDate: string;
   feedbackUrl?: string;
   reactivateUrl: string;
-  websiteUrl: string;
+  websiteUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const SubscriptionCanceledEmail = ({
-  userName,
-  cancellationDate,
-  feedbackUrl,
-  reactivateUrl,
+  userName = "Alex",
+  cancellationDate = "January 15, 2025",
+  feedbackUrl = "https://tracked.gg/feedback",
+  reactivateUrl = "https://tracked.gg/reactivate",
   websiteUrl = "https://tracked.gg",
 }: SubscriptionCanceledEmailProps) => {
   return (
-    <Html>
-      <Head>
-        <meta name="color-scheme" content="light only" />
-        <meta name="supported-color-schemes" content="light only" />
-      </Head>
-      <Preview>Your Tracked subscription has been canceled</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}>Subscription Canceled</Text>
-            <Text style={paragraph}>
-              Hi {userName}, we've confirmed that your Tracked subscription has
-              been canceled.
-            </Text>
-            <Section style={infoBox}>
-              <Text style={infoHeading}>What happens next:</Text>
-              <Text style={infoText}>
-                • Your subscription will remain active until {cancellationDate}
-              </Text>
-              <Text style={infoText}>
-                • You'll continue to have full access until that date
-              </Text>
-              <Text style={infoText}>
-                • Your data will be safely stored and available if you return
-              </Text>
-            </Section>
-            <Text style={paragraph}>
-              We're sorry to see you go! Your feedback helps us improve Tracked
-              for everyone.
-            </Text>
-            {feedbackUrl && (
-              <div
-                style={{
-                  marginTop: "16px",
-                  marginBottom: "16px",
-                  textAlign: "left" as const,
-                }}
-              >
-                <a
-                  href={feedbackUrl}
-                  style={{
-                    backgroundColor: "transparent",
-                    border: "1px solid #4ade80",
-                    borderRadius: "8px",
-                    fontSize: "14px",
-                    fontWeight: "bold",
-                    textDecoration: "none",
-                    padding: "10px 24px",
-                    display: "inline-block",
-                  }}
-                >
-                  <span
-                    style={{
-                      color: "#4ade80",
-                      textDecoration: "none",
-                    }}
-                  >
-                    Share Feedback
-                  </span>
-                </a>
-              </div>
-            )}
-            <Section style={winbackBox}>
-              <Text style={winbackHeading}>Changed your mind?</Text>
-              <Text style={winbackText}>
-                You can reactivate your subscription at any time before{" "}
-                {cancellationDate}.
-              </Text>
-              <div
-                style={{
-                  marginTop: "16px",
-                  textAlign: "left" as const,
-                }}
-              >
-                <a
-                  href={reactivateUrl}
-                  style={{
-                    backgroundColor: "#0f172a",
-                    borderRadius: "8px",
-                    fontSize: "16px",
-                    fontWeight: "bold",
-                    textDecoration: "none",
-                    padding: "12px 32px",
-                    display: "inline-block",
-                  }}
-                >
-                  <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                    Reactivate Subscription
-                  </span>
-                </a>
-              </div>
-            </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="Your Tracked subscription has been canceled">
+      <EmailHeader />
+      <Heading>Subscription Canceled</Heading>
+      <Paragraph>
+        Hi {userName}, we've confirmed that your Tracked subscription has been
+        canceled.
+      </Paragraph>
+      <FeatureBox title="What happens next:">
+        <SmallText style={{ marginBottom: "4px" }}>
+          • Your subscription will remain active until {cancellationDate}
+        </SmallText>
+        <SmallText style={{ marginBottom: "4px" }}>
+          • You'll continue to have full access until that date
+        </SmallText>
+        <SmallText>
+          • Your data will be safely stored and available if you return
+        </SmallText>
+      </FeatureBox>
+      <Paragraph>
+        We're sorry to see you go! Your feedback helps us improve Tracked for
+        everyone.
+      </Paragraph>
+      {feedbackUrl && (
+        <SecondaryButton href={feedbackUrl}>Share Feedback</SecondaryButton>
+      )}
+      <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",
+          }}
+        >
+          Changed your mind?
+        </Text>
+        <Text
+          style={{
+            color: colors.textSecondary,
+            fontSize: "14px",
+            lineHeight: "20px",
+            margin: "0",
+          }}
+        >
+          You can reactivate your subscription at any time before{" "}
+          {cancellationDate}.
+        </Text>
+        <PrimaryButton href={reactivateUrl}>
+          Reactivate Subscription
+        </PrimaryButton>
+      </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: "24px",
-  lineHeight: "32px",
-  fontWeight: "bold",
-  marginBottom: "16px",
-};
-const infoBox = {
-  backgroundColor: "#1e293b",
-  padding: "16px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-};
-const infoHeading = {
-  color: "#ffffff",
-  fontSize: "16px",
-  fontWeight: "bold",
-  marginBottom: "12px",
-};
-const infoText = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "24px",
-  marginBottom: "4px",
-};
-const winbackBox = {
-  backgroundColor: "#1e293b",
-  padding: "20px 24px",
-  borderRadius: "8px",
-  margin: "24px 0",
-  borderLeft: "4px solid #4ade80",
-};
-const winbackHeading = {
-  color: "#4ade80",
-  fontSize: "18px",
-  fontWeight: "bold",
-  marginBottom: "8px",
-};
-const winbackText = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "20px",
-};
-const footer = {
-  color: "#94a3b8", // slate-400 for subtle footer text
-  fontSize: "12px",
-  lineHeight: "16px",
-};
 export default SubscriptionCanceledEmail;

package/src/emails/support-email.tsx CHANGED Viewed

@@ -1,5 +1,13 @@
-import React from "react";
-import { Container, Hr, Text } from "@react-email/components";
+import * as React from "react";
+import {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  FeatureBox,
+  SmallText,
+  DiscordButton,
+} from "../components";
 interface SupportEmailProps {
   email: string;
@@ -8,73 +16,31 @@ interface SupportEmailProps {
 }
 export const SupportEmail = ({
-  email,
-  message,
-  category,
+  email = "user@example.com",
+  message = "I'm having trouble syncing my workouts between devices. The app shows different workout history on my phone versus my tablet. Can you help me resolve this issue?",
+  category = "Technical Issue",
 }: SupportEmailProps) => (
-  <Container style={styles.container}>
-    <Hr style={styles.hr} />
-    <Text style={styles.text}>
-      <strong>Email:</strong> {email}
-    </Text>
-    <Text style={styles.text}>
-      <strong>Message:</strong> {message}
-    </Text>
-    <Text style={styles.text}>
-      <strong>Category:</strong> {category}
-    </Text>
+  <EmailLayout preview={`Support request from ${email}`}>
+    <EmailHeader />
-    <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>
+    <Heading>Support Request</Heading>
-    <Hr style={styles.hr} />
-    <Text style={styles.footer}>Tracked, 9101 Horne Street, Vancouver, BC</Text>
-  </Container>
+    <FeatureBox>
+      <SmallText style={{ marginBottom: "8px" }}>
+        <strong>Email:</strong> {email}
+      </SmallText>
+      <SmallText style={{ marginBottom: "8px" }}>
+        <strong>Category:</strong> {category}
+      </SmallText>
+      <SmallText>
+        <strong>Message:</strong> {message}
+      </SmallText>
+    </FeatureBox>
+    <DiscordButton />
+    <EmailFooter />
+  </EmailLayout>
 );
-const styles = {
-  container: {
-    backgroundColor: "#1F2937",
-    margin: "0 auto",
-    padding: "16px",
-    paddingBottom: "64px",
-    borderRadius: "10px",
-    fontFamily: "sans-serif",
-  },
-  img: {
-    width: "40px",
-    height: "40px",
-  },
-  hr: {
-    borderColor: "#e6ebf1",
-    margin: "16px 0",
-  },
-  text: {
-    color: "#FFFFFF",
-  },
-  footer: {
-    color: "#6B7280",
-    fontSize: "12px",
-  },
-};
+export default SupportEmail;