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/team-invite.tsx CHANGED Viewed

@@ -1,21 +1,15 @@
 import * as React from "react";
+import { Img } from "@react-email/components";
 import {
-  Body,
-  Button,
-  Column,
-  Container,
-  Head,
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
   Heading,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Tailwind,
-  Text,
-} from "@react-email/components";
+  Paragraph,
+  PrimaryButton,
+  DiscordButton,
+  TextLink,
+} from "../components";
 interface TeamInviteEmailProps {
   teamName?: string;
@@ -26,237 +20,50 @@ interface TeamInviteEmailProps {
   invitationLink?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const TeamInviteEmail = ({
   teamName = "Team Tracked Training",
   teamRole = "Athlete",
-  websiteUrl = "https://www.tracked.training",
-  teamImage,
-  invitationLink,
+  websiteUrl = "https://tracked.gg",
+  teamImage = "https://cdn.trckd.ca/teams/default.png",
+  invitationLink = "https://tracked.gg/team/invite/abc123",
 }: TeamInviteEmailProps) => {
   return (
-    <Html>
-      <Head />
-      <Preview>Team Invite for {teamName}</Preview>
-      <Body style={main}>
-        <Container style={container}>
-          <Section style={box}>
-            <Row>
-              <Img src={`${baseUrl}`} width="40" height="40" alt="Tracked" />
-            </Row>
-            <Hr style={hr} />
-            {teamImage && (
-              <Img
-                src={teamImage || baseUrl}
-                height="70"
-                alt="Tracked"
-                style={{
-                  margin: "0 auto",
-                  padding: "20px",
-                }}
-              />
-            )}
-            <Text style={heading}>Invitation to join {teamName}</Text>
-            <Text style={paragraph}>
-              Join the team as a <strong>{teamRole}</strong> by pressing the
-              button below.
-            </Text>
-            <Button style={button} href={invitationLink}>
-              Join Team
-            </Button>
-            <Text style={{ ...paragraph }}>
-              If this email was not expected, please ignore it. You can learn
-              more about the Tracked Training Platform by visiting our{" "}
-              <Link style={anchor} href={websiteUrl}>
-                website
-              </Link>
-              .
-            </Text>
-            <Row style={row}>
-              <Column style={column}>
-                <Button
-                  style={appButton}
-                  href="https://apps.apple.com/app/tracked-training/id6450913418"
-                >
-                  <Img
-                    src="https://cdn.trckd.ca/assets/app-store-black.png"
-                    alt="Download on the App Store"
-                    style={img}
-                  />
-                </Button>
-              </Column>
-              <Column style={column}>
-                <Button
-                  style={appButton}
-                  href="https://play.google.com/store/apps/details?id=com.tracked.mobile"
-                >
-                  <Img
-                    src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
-                    alt="Google Play"
-                    style={img}
-                  />
-                </Button>
-              </Column>
-            </Row>
-            <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="https://tracked.gg/terms"
-                style={{ ...footer, paddingRight: 10 }}
-              >
-                Terms
-              </Link>
-              <Link style={{ ...footer, paddingRight: 10 }}> | </Link>
-              <Link
-                href="https://tracked.gg/privacy"
-                style={{ ...footer, paddingRight: 10 }}
-              >
-                Privacy
-              </Link>
-              <Link style={{ ...footer, paddingRight: 10 }}> | </Link>
-              <Link
-                href="https://tracked.gg/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={`Team Invite for ${teamName}`}>
+      <EmailHeader />
+      {teamImage && (
+        <Img
+          src={teamImage}
+          height="70"
+          alt={teamName}
+          style={{
+            margin: "0 auto 24px",
+            display: "block",
+          }}
+        />
+      )}
+      <Heading>Invitation to join {teamName}</Heading>
+      <Paragraph>
+        Join the team as a <strong>{teamRole}</strong> by pressing the button
+        below.
+      </Paragraph>
+      <PrimaryButton href={invitationLink || "#"} fullWidth>
+        Join Team
+      </PrimaryButton>
+      <Paragraph>
+        If this email was not expected, please ignore it. You can learn more
+        about the Tracked Training Platform by visiting our{" "}
+        <TextLink href={websiteUrl}>website</TextLink>.
+      </Paragraph>
+      <DiscordButton />
+      <EmailFooter websiteUrl={websiteUrl} />
+    </EmailLayout>
   );
 };
 export default TeamInviteEmail;
-const main = {
-  backgroundColor: "#1e293b",
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
-};
-const container = {
-  backgroundColor: "#0f172a",
-  margin: "0 auto",
-  padding: "20px 0 48px",
-  marginBottom: "64px",
-  borderRadius: "5px",
-};
-const box = {
-  padding: "0 48px",
-};
-const row = {
-  display: "flex",
-  flexDirection: "row" as const,
-};
-const column = {
-  flex: "0 0 48%",
-  "@media (maxWidth: 600px)": {
-    flex: "0 0 100%",
-    marginBottom: "10px",
-  },
-};
-const img = {
-  maxWidth: "100%",
-  height: "auto",
-};
-const appButton = {
-  backgroundColor: "transparent",
-  borderRadius: "5px",
-  color: "#ffffff",
-  fontSize: "16px",
-  fontWeight: "bold",
-  textDecoration: "none",
-  textAlign: "center" as const,
-  display: "block",
-  width: "100%",
-  maxWidth: "150px",
-};
-const hr = {
-  borderColor: "#475569",
-  margin: "20px 0",
-};
-const paragraph = {
-  color: "#e2e8f0",
-  fontSize: "16px",
-  lineHeight: "24px",
-  textAlign: "left" as const,
-};
-const heading = {
-  color: "#e2e8f0",
-  fontSize: "24px",
-  lineHeight: "32px",
-  fontWeight: "bold",
-  textAlign: "left" as const,
-};
-const anchor = {
-  color: "#4ade80",
-};
-const button = {
-  backgroundColor: "#4ade80",
-  borderRadius: "5px",
-  color: "#0f172a",
-  fontSize: "16px",
-  fontWeight: "bold",
-  textDecoration: "none",
-  textAlign: "center" as const,
-  display: "block",
-  width: "100%",
-  padding: "16px 0",
-};
-const footer = {
-  color: "#8898aa",
-  fontSize: "12px",
-  lineHeight: "16px",
-};

package/src/emails/team-member-removed-email.tsx CHANGED Viewed

@@ -1,21 +1,13 @@
 import * as React from "react";
 import {
-  Body,
-  Button,
-  Column,
-  Container,
-  Head,
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
   Heading,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Tailwind,
-  Text,
-} from "@react-email/components";
+  Paragraph,
+  DiscordButton,
+  TextLink,
+} from "../components";
 interface TeamMemberRemovedEmailProps {
   teamName?: string;
@@ -23,218 +15,31 @@ interface TeamMemberRemovedEmailProps {
   teamImage?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const TeamMemberRemovedEmail = ({
   teamName = "Team Tracked Training",
-  websiteUrl = "https://www.tracked.training",
-  teamImage,
+  websiteUrl = "https://tracked.gg",
 }: TeamMemberRemovedEmailProps) => {
   return (
-    <Html>
-      <Head />
-      <Preview>Removed from the team</Preview>
-      <Body style={main}>
-        <Container style={container}>
-          <Section style={box}>
-            <Img src={`${baseUrl}`} width="40" height="40" alt="Tracked" />
-            <Hr style={hr} />
-            <Text style={heading}>Team membership revoked</Text>
-            <Text style={paragraph}>
-              The team owner has removed you from the team. If you believe this
-              was a mistake, please contact the team owner.
-            </Text>
-            <Text style={{ ...paragraph }}>
-              If this email was not expected, please ignore it. You can learn
-              more about the Tracked Training Platform by visiting our{" "}
-              <Link style={anchor} href={websiteUrl}>
-                website
-              </Link>
-              .
-            </Text>
+    <EmailLayout preview="Removed from the team">
+      <EmailHeader />
-            <Row style={row}>
-              <Column style={column}>
-                <Button
-                  style={appButton}
-                  href="https://apps.apple.com/app/tracked-training/id6450913418"
-                >
-                  <Img
-                    src="https://cdn.trckd.ca/assets/app-store-black.png"
-                    alt="Download on the App Store"
-                    style={img}
-                  />
-                </Button>
-              </Column>
-              <Column style={column}>
-                <Button
-                  style={appButton}
-                  href="https://play.google.com/store/apps/details?id=com.tracked.mobile"
-                >
-                  <Img
-                    src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
-                    alt="Google Play"
-                    style={img}
-                  />
-                </Button>
-              </Column>
-            </Row>
+      <Heading>Team membership revoked</Heading>
+      <Paragraph>
+        The team owner has removed you from the team. If you believe this was a
+        mistake, please contact the team owner.
+      </Paragraph>
-            <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>
+      <Paragraph>
+        If this email was not expected, please ignore it. You can learn more
+        about the Tracked Training Platform by visiting our{" "}
+        <TextLink href={websiteUrl}>website</TextLink>.
+      </Paragraph>
-            <Hr style={hr} />
-            <Text style={footer}>
-              Copyright © Tracked Training Platform Inc. <br /> 9101 Horne
-              Street, Vancouver, BC
-            </Text>
+      <DiscordButton />
-            <Container>
-              <Link
-                href="https://tracked.gg/terms"
-                style={{ ...footer, paddingRight: 10 }}
-              >
-                Terms
-              </Link>
-              <Link style={{ ...footer, paddingRight: 10 }}> | </Link>
-              <Link
-                href="https://tracked.gg/privacy"
-                style={{ ...footer, paddingRight: 10 }}
-              >
-                Privacy
-              </Link>
-              <Link style={{ ...footer, paddingRight: 10 }}> | </Link>
-              <Link
-                href="https://tracked.gg/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>
+      <EmailFooter websiteUrl={websiteUrl} />
+    </EmailLayout>
   );
 };
 export default TeamMemberRemovedEmail;
-const main = {
-  backgroundColor: "#1e293b",
-  fontFamily:
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
-};
-const container = {
-  backgroundColor: "#0f172a",
-  margin: "0 auto",
-  padding: "20px 0 48px",
-  marginBottom: "64px",
-  borderRadius: "5px",
-};
-const box = {
-  padding: "0 48px",
-};
-const row = {
-  display: "flex",
-  flexDirection: "row" as const,
-};
-const column = {
-  flex: "0 0 48%",
-  "@media (maxWidth: 600px)": {
-    flex: "0 0 100%",
-    marginBottom: "10px",
-  },
-};
-const img = {
-  maxWidth: "100%",
-  height: "auto",
-};
-const appButton = {
-  backgroundColor: "transparent",
-  borderRadius: "5px",
-  color: "#ffffff",
-  fontSize: "16px",
-  fontWeight: "bold",
-  textDecoration: "none",
-  textAlign: "center" as const,
-  display: "block",
-  width: "100%",
-  maxWidth: "150px",
-};
-const hr = {
-  borderColor: "#475569",
-  margin: "20px 0",
-};
-const paragraph = {
-  color: "#e2e8f0",
-  fontSize: "16px",
-  lineHeight: "24px",
-  textAlign: "left" as const,
-};
-const heading = {
-  color: "#e2e8f0",
-  fontSize: "24px",
-  lineHeight: "32px",
-  fontWeight: "bold",
-  textAlign: "left" as const,
-};
-const anchor = {
-  color: "#4ade80",
-};
-const button = {
-  backgroundColor: "#4ade80",
-  borderRadius: "5px",
-  color: "#0f172a",
-  fontSize: "16px",
-  fontWeight: "bold",
-  textDecoration: "none",
-  textAlign: "center" as const,
-  display: "block",
-  width: "100%",
-  padding: "16px 0",
-};
-const footer = {
-  color: "#8898aa",
-  fontSize: "12px",
-  lineHeight: "16px",
-};