refactor: Update email templates

vriteio · Oct 16, 2023 · 0246b13 · 0246b13
1 parent e3bfcf0
commit 0246b13
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 5 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
+    "clicktracking",
     "codepen",
     "codesandbox",
     "Collab",

diff --git a/packages/emails/emails/magic-link.tsx b/packages/emails/emails/magic-link.tsx
@@ -43,13 +43,14 @@ const MagicLink: React.FC<MagicLinkProps> = ({ link = "" }) => {
             </Text>
             <Button
               className="bg-gray-200 px-[18px] py-[12px] text-gray-500 rounded-[8px] text-[14px]"
+              clicktracking="off"
               href={link}
             >
               Sign in to Vrite
             </Button>
             <Section className="text-start text-[14px] leading-[22px]">
               <Text className="mb-0 leading-[14px]">or follow this link:</Text>
-              <Link href={link} className="text-blue-600 no-underline">
+              <Link clicktracking="off" href={link} className="text-blue-600 no-underline">
                 {link}
               </Link>
               <Text>If you didn't request a sign-in link, you can ignore this email. </Text>
@@ -61,6 +62,7 @@ const MagicLink: React.FC<MagicLinkProps> = ({ link = "" }) => {
     </Html>
   );
 };
+
 export { MagicLink };
 export type { MagicLinkProps };
 export default MagicLink;
diff --git a/packages/emails/emails/verify-email-change.tsx b/packages/emails/emails/verify-email-change.tsx
@@ -43,13 +43,14 @@ const VerifyEmailChange: React.FC<VerifyEmailChangeProps> = ({ link = "" }) => {
             </Text>
             <Button
               className="bg-gray-200 px-[18px] py-[12px] text-gray-500 rounded-[8px] text-[14px]"
+              clicktracking="off"
               href={link}
             >
               Verify email address change
             </Button>
             <Section className="text-start text-[14px] leading-[22px]">
               <Text className="mb-0 leading-[14px]">or follow this link:</Text>
-              <Link href={link} className="text-blue-600 no-underline">
+              <Link href={link} className="text-blue-600 no-underline" clicktracking="off">
                 {link}
               </Link>
               <Text>
@@ -64,6 +65,7 @@ const VerifyEmailChange: React.FC<VerifyEmailChangeProps> = ({ link = "" }) => {
     </Html>
   );
 };
+
 export { VerifyEmailChange };
 export type { VerifyEmailChangeProps };
 export default VerifyEmailChange;
diff --git a/packages/emails/emails/verify-email.tsx b/packages/emails/emails/verify-email.tsx
@@ -48,13 +48,14 @@ const VerifyEmail: React.FC<VerifyEmailProps> = ({ link = "", user = "" }) => {
             </Text>
             <Button
               className="bg-gray-200 px-[18px] py-[12px] text-gray-500 rounded-[8px] text-[14px]"
+              clicktracking="off"
               href={link}
             >
               Verify email address{" "}
             </Button>
             <Section className="text-start text-[14px] leading-[22px]">
               <Text className="mb-0 leading-[14px]">or follow this link:</Text>
-              <Link href={link} className="text-blue-600 no-underline">
+              <Link href={link} className="text-blue-600 no-underline" clicktracking="off">
                 {link}
               </Link>
               <Text>If you didn't sign up for Vrite, you can ignore this email.</Text>

diff --git a/packages/emails/emails/verify-password-change.tsx b/packages/emails/emails/verify-password-change.tsx
@@ -43,13 +43,14 @@ const VerifyPasswordChange: React.FC<VerifyPasswordChangeProps> = ({ link = "" }
             </Text>
             <Button
               className="bg-gray-200 px-[18px] py-[12px] text-gray-500 rounded-[8px] text-[14px]"
+              clicktracking="off"
               href={link}
             >
               Sign in to Vrite
             </Button>
             <Section className="text-start text-[14px] leading-[22px]">
               <Text className="mb-0 leading-[14px]">or follow this link:</Text>
-              <Link href={link} className="text-blue-600 no-underline">
+              <Link href={link} className="text-blue-600 no-underline" clicktracking="off">
                 {link}
               </Link>
               <Text>

diff --git a/packages/emails/emails/workspace-invite.tsx b/packages/emails/emails/workspace-invite.tsx
@@ -51,13 +51,14 @@ const WorkspaceInvite: React.FC<WorkspaceInviteProps> = ({
             </Text>
             <Button
               className="bg-gray-200 px-[18px] py-[12px] text-gray-500 rounded-[8px] text-[14px]"
+              clicktracking="off"
               href={link}
             >
               Accept invite
             </Button>
             <Section className="text-start text-[14px] leading-[22px]">
               <Text className="mb-0 leading-[14px]">or follow this link:</Text>
-              <Link href={link} className="text-blue-600 no-underline">
+              <Link href={link} className="text-blue-600 no-underline" clicktracking="off">
                 {link}
               </Link>
               <Text>If you don't recognize this invite, you can ignore this email.</Text>

diff --git a/packages/emails/src/render-email.tsx b/packages/emails/src/render-email.tsx
@@ -6,6 +6,14 @@ import { WorkspaceInvite } from "../emails/workspace-invite";
 import { render } from "@react-email/render";
 import * as React from "react";
 
+declare global {
+  namespace JSX {
+    interface IntrinsicAttributes {
+      clicktracking?: string;
+    }
+  }
+}
+
 const templateMap = {
   "magic-link": MagicLink,
   "verify-email-change": VerifyEmailChange,