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/tracked-magic-link-activate.tsx CHANGED Viewed

@@ -1,252 +1,44 @@
-import React from "react";
+import * as React from "react";
 import {
-  Body,
-  Button,
-  Column,
-  Container,
-  Head,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Text,
-} from "@react-email/components";
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Paragraph,
+  PrimaryButton,
+  DiscordButton,
+  TextLink,
+} from "../components";
 interface Props {
   activateButtonLink: string;
-  websiteUrl: string;
+  websiteUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
 export const TrackedMagicLinkActivate = ({
-  activateButtonLink,
-  websiteUrl,
+  activateButtonLink = "https://tracked.gg/auth/activate?token=abc123",
+  websiteUrl = "https://tracked.gg",
 }: Props) => (
-  <Html>
-    <Head>
-      <meta name="color-scheme" content="light only" />
-      <meta name="supported-color-schemes" content="light only" />
-    </Head>
-    <Preview>
-      New activation requested for Tracked - The gym tracking platform
-    </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={paragraph}>Welcome to Tracked!</Text>
-          <Text style={paragraph}>
-            Press the button below to confirm your Tracked account email. You
-            will be redirected to the app.
-          </Text>
-          <div style={{ marginTop: "24px", marginBottom: "24px", textAlign: "left" as const }}>
-            <a
-              href={activateButtonLink}
-              style={{
-                backgroundColor: "#0f172a",
-                borderRadius: "8px",
-                fontSize: "16px",
-                fontWeight: "bold",
-                textDecoration: "none",
-                padding: "12px 32px",
-                display: "inline-block",
-              }}
-            >
-              <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                Confirm Email
-              </span>
-            </a>
-          </div>
-          <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="New activation requested for Tracked - The gym tracking platform">
+    <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>
+    <Paragraph>Welcome to Tracked!</Paragraph>
+    <Paragraph>
+      Press the button below to confirm your Tracked account email. You will be
+      redirected to the app.
+    </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>
+    <PrimaryButton href={activateButtonLink}>Confirm Email</PrimaryButton>
-          <Hr style={hr} />
-          <Text style={footer}>
-            Copyright © Tracked Training Platform Inc. <br /> 9101 Horne
-            Street, Vancouver, BC
-          </Text>
+    <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>
-          <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>
+    <DiscordButton />
-          <Text style={footer}>
-            This is a service notification by the Tracked Training Platform.
-          </Text>
-        </Section>
-      </Container>
-    </Body>
-  </Html>
+    <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 anchor = {
-  color: "#4ade80", // green-400
-  textDecoration: "underline",
-};
-const paragraph = {
-  color: "#ffffff", // white
-  fontSize: "16px",
-  lineHeight: "24px",
-  textAlign: "left" as const,
-};
-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: "8px",
-  color: "#ffffff", // white
-  fontSize: "16px",
-  fontWeight: "bold",
-  textDecoration: "none",
-  textAlign: "center" as const,
-  display: "block",
-  width: "100%",
-  maxWidth: "150px",
-};
-const footer = {
-  color: "#94a3b8", // slate-400 for subtle footer text
-  fontSize: "12px",
-  lineHeight: "16px",
-};
+export default TrackedMagicLinkActivate;

package/src/emails/tracked-magic-link.tsx CHANGED Viewed

@@ -1,264 +1,44 @@
-import React from "react";
+import * as React from "react";
 import {
-  Body,
-  Button,
-  Column,
-  Container,
-  Head,
-  Hr,
-  Html,
-  Img,
-  Link,
-  Preview,
-  Row,
-  Section,
-  Text,
-} from "@react-email/components";
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  Paragraph,
+  PrimaryButton,
+  DiscordButton,
+  TextLink,
+} from "../components";
 interface Props {
   loginButtonLink: string;
-  websiteUrl: string;
+  websiteUrl?: string;
 }
-const baseUrl = "https://tracked.gg/android-chrome-192x192.png";
+export const TrackedMagicLink = ({
+  loginButtonLink = "https://tracked.gg/auth/login?token=abc123",
+  websiteUrl = "https://tracked.gg",
+}: Props) => (
+  <EmailLayout preview="New login requested for Tracked - The gym tracking platform">
+    <EmailHeader />
-export const TrackedMagicLink = ({ loginButtonLink, websiteUrl }: Props) => (
-  <Html>
-    <Head>
-      <meta name="color-scheme" content="light only" />
-      <meta name="supported-color-schemes" content="light only" />
-    </Head>
-    <Preview>
-      New login requested for Tracked - The gym tracking platform
-    </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={paragraph}>Welcome to Tracked!</Text>
-          <Text style={paragraph}>
-            To get started, press the button below to log in to your Tracked
-            account. You will be redirected to the app.
-          </Text>
-          <div
-            style={{
-              marginTop: "24px",
-              marginBottom: "24px",
-              textAlign: "left" as const,
-            }}
-          >
-            <a
-              href={loginButtonLink}
-              style={{
-                backgroundColor: "#0f172a",
-                borderRadius: "8px",
-                fontSize: "16px",
-                fontWeight: "bold",
-                textDecoration: "none",
-                padding: "12px 32px",
-                display: "inline-block",
-              }}
-            >
-              <span style={{ color: "#ffffff", textDecoration: "none" }}>
-                Login to Tracked
-              </span>
-            </a>
-          </div>
+    <Paragraph>Welcome to Tracked!</Paragraph>
+    <Paragraph>
+      To get started, press the button below to log in to your Tracked account.
+      You will be redirected to the app.
+    </Paragraph>
-          <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>
+    <PrimaryButton href={loginButtonLink}>Login to Tracked</PrimaryButton>
-          <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>
+    <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>
-          <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>
+    <DiscordButton />
-          <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>
+    <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 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: "8px",
-  color: "#ffffff", // white
-  fontSize: "16px",
-  fontWeight: "bold",
-  textDecoration: "none",
-  textAlign: "center" as const,
-  display: "block",
-  width: "100%",
-  maxWidth: "150px",
-};
-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 anchor = {
-  color: "#4ade80", // green-400
-  textDecoration: "underline",
-};
-const footer = {
-  color: "#94a3b8", // slate-400 for subtle footer text
-  fontSize: "12px",
-  lineHeight: "16px",
-};
+export default TrackedMagicLink;