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/new-follower.tsx CHANGED Viewed

@@ -1,18 +1,17 @@
-import React from "react";
+import * as React from "react";
+import { Section, Img } 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,
+  DiscordButton,
+  colors,
+} from "../components";
 interface NewFollowerEmailProps {
   userName: string;
@@ -20,17 +19,15 @@ interface NewFollowerEmailProps {
   followerUsername?: string;
   followerAvatarUrl?: string;
   followerProfileUrl: string;
-  websiteUrl: string;
+  websiteUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const NewFollowerEmail = ({
-  userName,
-  followerName,
-  followerUsername,
-  followerAvatarUrl,
-  followerProfileUrl,
+  userName = "Alex",
+  followerName = "Jordan Smith",
+  followerUsername = "jordanfitness",
+  followerAvatarUrl = "https://cdn.trckd.ca/avatars/default.png",
+  followerProfileUrl = "tracked://app",
   websiteUrl = "https://tracked.gg",
 }: NewFollowerEmailProps) => {
   const displayName = followerUsername
@@ -38,223 +35,48 @@ export const NewFollowerEmail = ({
     : followerName;
   return (
-    <Html>
-      <Head>
-        <meta name="color-scheme" content="light only" />
-        <meta name="supported-color-schemes" content="light only" />
-      </Head>
-      <Preview>{followerName} started following you 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 Follower!</Text>
-            <Text style={paragraph}>
-              Hi {userName}, {displayName} started following you on Tracked.
-            </Text>
-            {followerAvatarUrl && (
-              <Section
-                style={{ textAlign: "center" as const, margin: "24px 0" }}
-              >
-                <Img
-                  src={followerAvatarUrl}
-                  width="80"
-                  height="80"
-                  alt={followerName}
-                  style={{
-                    borderRadius: "50%",
-                    border: "2px solid #4ade80",
-                  }}
-                />
-              </Section>
-            )}
-            <Section style={infoBox}>
-              <Text style={infoText}>
-                <strong>{displayName}</strong> is now following your fitness
-                journey and will see your public workouts and achievements.
-              </Text>
-            </Section>
-            <div
-              style={{
-                marginTop: "24px",
-                marginBottom: "24px",
-                textAlign: "left" as const,
-              }}
-            >
-              <a
-                href={followerProfileUrl}
-                style={{
-                  backgroundColor: "#0f172a",
-                  borderRadius: "8px",
-                  fontSize: "16px",
-                  fontWeight: "bold",
-                  textDecoration: "none",
-                  padding: "12px 32px",
-                  display: "inline-block",
-                }}
-              >
-                <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                  View Profile
-                </span>
-              </a>
-            </div>
-            <Text style={{ ...paragraph }}>
-              Check out their profile to see their workouts and consider
-              following them back!
-            </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={`${followerName} started following you on Tracked`}>
+      <EmailHeader />
+      <Heading>You Have a New Follower!</Heading>
+      <Paragraph>
+        Hi {userName}, {displayName} started following you on Tracked.
+      </Paragraph>
+      {followerAvatarUrl && (
+        <Section style={{ textAlign: "center" as const, margin: "24px 0" }}>
+          <Img
+            src={followerAvatarUrl}
+            width="80"
+            height="80"
+            alt={followerName}
+            style={{
+              borderRadius: "50%",
+              border: `2px solid ${colors.accent}`,
+            }}
+          />
+        </Section>
+      )}
+      <FeatureBox>
+        <SmallText>
+          <strong>{displayName}</strong> is now following your fitness journey
+          and will see your public workouts and achievements.
+        </SmallText>
+      </FeatureBox>
+      <PrimaryButton href={followerProfileUrl}>View Profile</PrimaryButton>
+      <Paragraph>
+        Check out their profile to see their workouts and consider following
+        them back!
+      </Paragraph>
+      <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 infoText = {
-  color: "#e2e8f0",
-  fontSize: "14px",
-  lineHeight: "24px",
-  marginBottom: "4px",
-};
-const footer = {
-  color: "#94a3b8", // slate-400 for subtle footer text
-  fontSize: "12px",
-  lineHeight: "16px",
-};
 export default NewFollowerEmail;

package/src/emails/nps-survey.tsx ADDED Viewed

@@ -0,0 +1,149 @@
+import * as React from "react";
+import { Section, Text } from "@react-email/components";
+import {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Heading,
+  Paragraph,
+  colors,
+  spacing,
+  borderRadius,
+} from "../components";
+interface NpsSurveyEmailProps {
+  userName: string;
+  surveyBaseUrl: string;
+  websiteUrl?: string;
+  unsubscribeUrl?: string;
+}
+const ScoreButton = ({
+  score,
+  baseUrl,
+}: {
+  score: number;
+  baseUrl: string;
+}) => {
+  const getColor = () => {
+    if (score <= 6) return colors.error;
+    if (score <= 8) return colors.warning;
+    return colors.success;
+  };
+  return (
+    <td style={{ padding: "0 2px" }}>
+      <a
+        href={`${baseUrl}?score=${score}`}
+        style={{
+          display: "inline-block",
+          width: "36px",
+          height: "36px",
+          lineHeight: "36px",
+          textAlign: "center" as const,
+          backgroundColor: colors.surface,
+          border: `1px solid ${colors.border}`,
+          borderRadius: borderRadius.sm,
+          color: colors.textPrimary,
+          fontSize: "14px",
+          fontWeight: "600",
+          textDecoration: "none",
+        }}
+      >
+        {score}
+      </a>
+    </td>
+  );
+};
+export const NpsSurveyEmail = ({
+  userName = "Alex",
+  surveyBaseUrl = "https://tracked.gg/survey/nps",
+  websiteUrl = "https://tracked.gg",
+  unsubscribeUrl = "https://tracked.gg/unsubscribe",
+}: NpsSurveyEmailProps) => {
+  return (
+    <EmailLayout preview="Quick question: How likely are you to recommend Tracked?">
+      <EmailHeader />
+      <Heading>Quick Feedback</Heading>
+      <Paragraph>
+        Hi {userName}, we'd love your honest feedback. It only takes 10 seconds!
+      </Paragraph>
+      <Section
+        style={{
+          backgroundColor: colors.surface,
+          padding: spacing.lg,
+          borderRadius: borderRadius.md,
+          margin: `${spacing.lg} 0`,
+          border: `1px solid ${colors.border}`,
+        }}
+      >
+        <Text
+          style={{
+            color: colors.textPrimary,
+            fontSize: "16px",
+            fontWeight: "600",
+            textAlign: "center" as const,
+            margin: "0 0 16px 0",
+          }}
+        >
+          How likely are you to recommend Tracked to a friend?
+        </Text>
+        <table
+          cellPadding="0"
+          cellSpacing="0"
+          style={{ margin: "0 auto" }}
+        >
+          <tr>
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((score) => (
+              <ScoreButton key={score} score={score} baseUrl={surveyBaseUrl} />
+            ))}
+          </tr>
+        </table>
+        <table
+          cellPadding="0"
+          cellSpacing="0"
+          style={{ width: "100%", marginTop: "12px" }}
+        >
+          <tr>
+            <td style={{ textAlign: "left" as const }}>
+              <Text
+                style={{
+                  color: colors.textMuted,
+                  fontSize: "12px",
+                  margin: "0",
+                }}
+              >
+                Not likely
+              </Text>
+            </td>
+            <td style={{ textAlign: "right" as const }}>
+              <Text
+                style={{
+                  color: colors.textMuted,
+                  fontSize: "12px",
+                  margin: "0",
+                }}
+              >
+                Very likely
+              </Text>
+            </td>
+          </tr>
+        </table>
+      </Section>
+      <Paragraph muted style={{ textAlign: "center" as const }}>
+        Just click a number above - that's it! Your feedback helps us build a
+        better app for everyone.
+      </Paragraph>
+      <EmailFooter websiteUrl={websiteUrl} marketing unsubscribeUrl={unsubscribeUrl} />
+    </EmailLayout>
+  );
+};
+export default NpsSurveyEmail;