feat: Notification Email Templates (#13940)

server/src/emails/album-invite.email.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ImmichButton } from 'src/emails/components/button.component';
 import ImmichLayout from 'src/emails/components/immich.layout';
 import { AlbumInviteEmailProps } from 'src/interfaces/notification.interface';
+import { replaceTemplateTags } from 'src/utils/replace-template-tags';
 
 export const AlbumInviteEmail = ({
   baseUrl,
@@ -11,39 +12,64 @@ export const AlbumInviteEmail = ({
   senderName,
   albumId,
   cid,
-}: AlbumInviteEmailProps) => (
-  <ImmichLayout preview="You have been added to a shared album.">
-    <Text className="m-0">
-      Hey <strong>{recipientName}</strong>!
-    </Text>
+  customTemplate,
+}: AlbumInviteEmailProps) => {
+  const variables = {
+    albumName,
+    recipientName,
+    senderName,
+    albumId,
+    baseUrl,
+  };
 
-    <Text>
-      {senderName} has added you to the album <strong>{albumName}</strong>.
-    </Text>
+  const emailContent = customTemplate ? (
+    replaceTemplateTags(customTemplate, variables)
+  ) : (
+    <>
+      <Text className="m-0">
+        Hey <strong>{recipientName}</strong>!
+      </Text>
 
-    {cid && (
-      <Section className="flex justify-center my-0">
-        <Img
-          className="max-w-[300px] w-full rounded-lg"
-          src={`cid:${cid}`}
-          style={{
-            boxShadow: 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px',
-          }}
-        />
+      <Text>
+        {senderName} has added you to the album <strong>{albumName}</strong>.
+      </Text>
+    </>
+  );
+
+  return (
+    <ImmichLayout preview={customTemplate ? emailContent.toString() : 'You have been added to a shared album.'}>
+      {customTemplate && (
+        <Text className="m-0">
+          <div dangerouslySetInnerHTML={{ __html: emailContent }}></div>
+        </Text>
+      )}
+
+      {!customTemplate && emailContent}
+
+      {cid && (
+        <Section className="flex justify-center my-0">
+          <Img
+            className="max-w-[300px] w-full rounded-lg"
+            src={`cid:${cid}`}
+            style={{
+              boxShadow: 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px',
+            }}
+          />
+        </Section>
+      )}
+
+      <Section className="flex justify-center my-6">
+        <ImmichButton href={`${baseUrl}/albums/${albumId}`}>View Album</ImmichButton>
       </Section>
-    )}
 
-    <Section className="flex justify-center my-6">
-      <ImmichButton href={`${baseUrl}/albums/${albumId}`}>View Album</ImmichButton>
-    </Section>
-
-    <Text className="text-xs">
-      If you cannot click the button use the link below to view the album.
-      <br />
-      <Link href={`${baseUrl}/albums/${albumId}`}>{`${baseUrl}/albums/${albumId}`}</Link>
-    </Text>
-  </ImmichLayout>
-);
+      <Text className="text-xs">
+        If you cannot click the button use the link below to view the album.
+        <br />
+        <Link href={`${baseUrl}/albums/${albumId}`}>{`${baseUrl}/albums/${albumId}`}</Link>
+      </Text>
+    </ImmichLayout>
+  );
+};
 
 AlbumInviteEmail.PreviewProps = {
   baseUrl: 'https://demo.immich.app',

server/src/emails/album-update.email.tsx

@@ -3,47 +3,80 @@ import * as React from 'react';
 import { ImmichButton } from 'src/emails/components/button.component';
 import ImmichLayout from 'src/emails/components/immich.layout';
 import { AlbumUpdateEmailProps } from 'src/interfaces/notification.interface';
+import { replaceTemplateTags } from 'src/utils/replace-template-tags';
 
-export const AlbumUpdateEmail = ({ baseUrl, albumName, recipientName, albumId, cid }: AlbumUpdateEmailProps) => (
-  <ImmichLayout preview="New media has been added to a shared album.">
-    <Text className="m-0">
-      Hey <strong>{recipientName}</strong>!
-    </Text>
+export const AlbumUpdateEmail = ({
+  baseUrl,
+  albumName,
+  recipientName,
+  albumId,
+  cid,
+  customTemplate,
+}: AlbumUpdateEmailProps) => {
+  const usableTemplateVariables = {
+    albumName,
+    recipientName,
+    albumId,
+    baseUrl,
+  };
 
-    <Text>
-      New media has been added to <strong>{albumName}</strong>,
-      <br /> check it out!
-    </Text>
+  const emailContent = customTemplate ? (
+    replaceTemplateTags(customTemplate, usableTemplateVariables)
+  ) : (
+    <>
+      <Text className="m-0">
+        Hey <strong>{recipientName}</strong>!
+      </Text>
 
-    {cid && (
-      <Section className="flex justify-center my-0">
-        <Img
-          className="max-w-[300px] w-full rounded-lg"
-          src={`cid:${cid}`}
-          style={{
-            boxShadow: 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px',
-          }}
-        />
+      <Text>
+        New media has been added to <strong>{albumName}</strong>,
+        <br /> check it out!
+      </Text>
+    </>
+  );
+
+  return (
+    <ImmichLayout preview={customTemplate ? emailContent.toString() : 'New media has been added to a shared album.'}>
+      {customTemplate && (
+        <Text className="m-0">
+          <div dangerouslySetInnerHTML={{ __html: emailContent }}></div>
+        </Text>
+      )}
+
+      {!customTemplate && emailContent}
+
+      {cid && (
+        <Section className="flex justify-center my-0">
+          <Img
+            className="max-w-[300px] w-full rounded-lg"
+            src={`cid:${cid}`}
+            style={{
+              boxShadow: 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px',
+            }}
+          />
+        </Section>
+      )}
+
+      <Section className="flex justify-center my-6">
+        <ImmichButton href={`${baseUrl}/albums/${albumId}`}>View Album</ImmichButton>
       </Section>
-    )}
 
-    <Section className="flex justify-center my-6">
-      <ImmichButton href={`${baseUrl}/albums/${albumId}`}>View Album</ImmichButton>
-    </Section>
-
-    <Text className="text-xs">
-      If you cannot click the button use the link below to view the album.
-      <br />
-      <Link href={`${baseUrl}/albums/${albumId}`}>{`${baseUrl}/albums/${albumId}`}</Link>
-    </Text>
-  </ImmichLayout>
-);
+      <Text className="text-xs">
+        If you cannot click the button use the link below to view the album.
+        <br />
+        <Link href={`${baseUrl}/albums/${albumId}`}>{`${baseUrl}/albums/${albumId}`}</Link>
+      </Text>
+    </ImmichLayout>
+  );
+};
 
 AlbumUpdateEmail.PreviewProps = {
   baseUrl: 'https://demo.immich.app',
   albumName: 'Trip to Europe',
   albumId: 'b63f6dae-e1c9-401b-9a85-9dbbf5612539',
   recipientName: 'Alan Turing',
+  cid: '',
+  customTemplate: '',
 } as AlbumUpdateEmailProps;
 
 export default AlbumUpdateEmail;

server/src/emails/welcome.email.tsx

@@ -3,36 +3,62 @@ import * as React from 'react';
 import { ImmichButton } from 'src/emails/components/button.component';
 import ImmichLayout from 'src/emails/components/immich.layout';
 import { WelcomeEmailProps } from 'src/interfaces/notification.interface';
+import { replaceTemplateTags } from 'src/utils/replace-template-tags';
 
-export const WelcomeEmail = ({ baseUrl, displayName, username, password }: WelcomeEmailProps) => (
-  <ImmichLayout preview="You have been invited to a new Immich instance.">
-    <Text className="m-0">
-      Hey <strong>{displayName}</strong>!
-    </Text>
+export const WelcomeEmail = ({ baseUrl, displayName, username, password, customTemplate }: WelcomeEmailProps) => {
+  const usableTemplateVariables = {
+    displayName,
+    username,
+    password,
+    baseUrl,
+  };
 
-    <Text>A new account has been created for you.</Text>
+  const emailContent = customTemplate ? (
+    replaceTemplateTags(customTemplate, usableTemplateVariables)
+  ) : (
+    <>
+      <Text className="m-0">
+        Hey <strong>{displayName}</strong>!
+      </Text>
 
-    <Text>
-      <strong>Username</strong>: {username}
-      {password && (
-        <>
-          <br />
-          <strong>Password</strong>: {password}
-        </>
+      <Text>A new account has been created for you.</Text>
+
+      <Text>
+        <strong>Username</strong>: {username}
+        {password && (
+          <>
+            <br />
+            <strong>Password</strong>: {password}
+          </>
+        )}
+      </Text>
+    </>
+  );
+
+  return (
+    <ImmichLayout
+      preview={customTemplate ? emailContent.toString() : 'You have been invited to a new Immich instance.'}
+    >
+      {customTemplate && (
+        <Text className="m-0">
+          <div dangerouslySetInnerHTML={{ __html: emailContent }}></div>
+        </Text>
       )}
-    </Text>
 
-    <Section className="flex justify-center my-6">
-      <ImmichButton href={`${baseUrl}/auth/login`}>Login</ImmichButton>
-    </Section>
+      {!customTemplate && emailContent}
 
-    <Text className="text-xs">
-      If you cannot click the button use the link below to proceed with first login.
-      <br />
-      <Link href={baseUrl}>{baseUrl}</Link>
-    </Text>
-  </ImmichLayout>
-);
+      <Section className="flex justify-center my-6">
+        <ImmichButton href={`${baseUrl}/auth/login`}>Login</ImmichButton>
+      </Section>
+
+      <Text className="text-xs">
+        If you cannot click the button use the link below to proceed with first login.
+        <br />
+        <Link href={baseUrl}>{baseUrl}</Link>
+      </Text>
+    </ImmichLayout>
+  );
+};
 
 WelcomeEmail.PreviewProps = {
   baseUrl: 'https://demo.immich.app/auth/login',