From f38e76db5a5672c306ad923ec9f3d5cbb9853256 Mon Sep 17 00:00:00 2001
From: Kilu <lu@appflowy.io>
Date: Fri, 26 Apr 2024 23:25:25 +0800
Subject: [PATCH] feat: support invitation html absolute path

---
 .../workspace_invitation.html                 | 36 ++++++++--------
 email_template/config.js                      |  9 ++++
 email_template/config.production.js           |  9 ++++
 .../src/templates/workspace_invitation.html   | 43 ++++++++++---------
 4 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/assets/mailer_templates/build_production/workspace_invitation.html b/assets/mailer_templates/build_production/workspace_invitation.html
index 4918641d..5029ca57 100644
--- a/assets/mailer_templates/build_production/workspace_invitation.html
+++ b/assets/mailer_templates/build_production/workspace_invitation.html
@@ -42,17 +42,17 @@
     &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847; &#8199;&#65279;&#847;
   </div>
   <div role="article" aria-roledescription="email" aria-label="Confirm to join the workspace" lang="en">
-    <div class="sm-px-4 sm-py-12" style="background-color: #faf5ff; padding: 96px 48px">
+    <div class="sm-px-4 sm-py-12" style="background-color: #faf5ff; padding: 96px 48px; color: #000">
       <table align="center" cellpadding="0" cellspacing="0" role="none">
         <tr>
           <td style="width: 552px; max-width: 100%">
-            <div style="height: 48px; width: 100%; text-align: center">
-              <img width="48px" height="48px" style="max-width: 100%; vertical-align: middle; line-height: 1; overflow: hidden; border-radius: 9999px" alt="">
+            <div style="width: 100%; text-align: center">
+              <img src="{{ .UserIconURL }}" width="48px" height="48px" alt="{{ .UserName }}" style="max-width: 100%; vertical-align: middle; line-height: 1; overflow: hidden; border-radius: 9999px; object-fit: cover">
             </div>
             <p style="width: 100%; white-space: normal; overflow-wrap: break-word; text-align: center; font-size: 24px">
-              <span style="font-size: 30px; font-weight: 700">undefined</span>
+              <span style="font-size: 30px; font-weight: 700">{{ .UserName }}</span>
               <span>invited to Join</span>
-              <span style="font-size: 30px; font-weight: 700;">undefined</span>
+              <span style="font-size: 30px; font-weight: 700;">{{ .WorkspaceName }}</span>
               <span>on AppFlowy</span>
             </p>
             <div role="separator" style="background-color: #cbd5e1; height: 1px; line-height: 1px; margin: 24px 20%">&zwj;</div>
@@ -64,8 +64,8 @@
                       <td style="width: 75%">
                       </td>
                       <td style="width: 25%">
-                        <div style="margin-right: 8px; height: 60px; width: 60px; overflow: hidden; border-radius: 16px; border-width: 2px; border-color: #000; background-color: #fff">
-                          <img width="100%" height="100%" style="max-width: 100%; vertical-align: middle; line-height: 1;" alt="">
+                        <div style="margin-right: 8px; height: 60px; width: 60px; overflow: hidden; border-radius: 16px; background-color: #fff; border: 2px solid black">
+                          <img src="{{ .WorkspaceIconURL }}" width="100%" height="100%" alt="{{ .WorkspaceName }}" style="max-width: 100%; vertical-align: middle; line-height: 1; overflow: hidden; object-fit: cover;">
                         </div>
                       </td>
                     </tr>
@@ -73,14 +73,14 @@
                 </td>
                 <td style="width: 58.333333%">
                   <div style="margin-bottom: 8px; font-weight: 700">
-                    undefined
+                    {{ .WorkspaceName }}
                   </div>
-                  <div style="font-size: 14px; color: #64748b"> undefined members</div>
+                  <div style="font-size: 14px; color: #64748b"> {{ .WorkspaceMembersCount }} members</div>
                 </td>
               </tr>
             </table>
             <div style="text-align: center;">
-              <a class="hover-opacity-90" style="margin-top: 32px; margin-bottom: 32px; display: inline-block; height: 34px; width: 60%; cursor: pointer; border-radius: 16px; padding: 16px 24px; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-size: 20px; font-weight: 400; line-height: 34px">
+              <a href="{{ .AcceptUrl }}" class="hover-opacity-90" style="margin-top: 32px; margin-bottom: 32px; display: inline-block; height: 34px; width: 60%; cursor: pointer; border-radius: 16px; padding: 16px 24px; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-size: 20px; font-weight: 400; line-height: 34px">
                 <!--[if mso]>
       <i style="mso-font-width: 150%; mso-text-raise: 30px" hidden>&emsp;</i>
     <![endif]-->
@@ -110,7 +110,7 @@
           <td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #475569">
             <p style="margin: 0 0 16px; cursor: pointer; text-transform: uppercase">
               <a href="https://appflowy.io">
-                <img src="images/appflowy-logo.svg" width="150px" style="max-width: 100%; vertical-align: middle; line-height: 1;" alt="">
+                <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/appflowy-logo.svg" width="150px" style="max-width: 100%; vertical-align: middle; line-height: 1;" alt="">
               </a>
             </p>
             <p style="margin: 0; font-size: 14px;">
@@ -126,7 +126,7 @@
       <i style="mso-font-width: 150%; mso-text-raise: 30px;" hidden>&emsp;</i>
     <![endif]-->
                       <span style="mso-text-raise: 16px">
-                  <img src="images/appstore-badge.svg" width="16px" alt="Download on the App Store" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 12px">
+                  <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/appstore-badge.svg" width="16px" alt="Download on the App Store" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 12px">
                   <span style="margin-left: 24px; font-size: 14px">Test Flight</span>
                       </span>
                       <!--[if mso]>
@@ -142,7 +142,7 @@
       <i style="mso-font-width: 150%; mso-text-raise: 30px;" hidden>&emsp;</i>
     <![endif]-->
                       <span style="mso-text-raise: 16px">
-                  <img src="images/google-play-badge.svg" width="16px" alt="Get it on Google Play" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 16px">
+                  <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/google-play-badge.svg" width="16px" alt="Get it on Google Play" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 16px">
                   <span style="margin-left: 24px; font-size: 14px;">Google Play</span>
                       </span>
                       <!--[if mso]>
@@ -155,19 +155,19 @@
             </table>
             <p style="cursor: default">
               <a href="https://twitter.com/appflowy" style="margin-right: 16px; color: #4338ca; text-decoration: none">
-                <img src="images/twitter.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
+                <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/twitter.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
               </a>
               <a href="https://www.reddit.com/r/AppFlowy" style="margin-right: 16px; color: #4338ca; text-decoration: none;">
-                <img src="images/reddit.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
+                <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/reddit.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
               </a>
               <a href="https://github.com/AppFlowy-IO/AppFlowy" style="margin-right: 16px; color: #4338ca; text-decoration: none;">
-                <img src="images/github.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
+                <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/github.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
               </a>
               <a href="https://discord.gg/9Q2xaN37tV" style="margin-right: 16px; color: #4338ca; text-decoration: none;">
-                <img src="images/discord.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
+                <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/discord.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
               </a>
               <a href="https://forum.appflowy.io/" style="color: #4338ca; text-decoration: none;">
-                <img src="images/forum.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
+                <img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/forum.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
               </a>
             </p>
             <p style="font-size: 12px; line-height: 18px;">
diff --git a/email_template/config.js b/email_template/config.js
index 29676d3c..3e6ed1aa 100644
--- a/email_template/config.js
+++ b/email_template/config.js
@@ -24,4 +24,13 @@ module.exports = {
       },
     },
   },
+  locals: {
+    cdnBaseUrl: '',
+    userIconUrl: "https://cdn-icons-png.flaticon.com/512/1077/1077012.png",
+    userName: "John Doe",
+    acceptUrl: "https://appflowy.io",
+    workspaceName: "AppFlowy",
+    workspaceMembersCount: "100",
+    workspaceIconURL: "https://cdn-icons-png.flaticon.com/512/1078/1078013.png",
+  },
 }
diff --git a/email_template/config.production.js b/email_template/config.production.js
index 9cb4c6f0..62d6aff5 100644
--- a/email_template/config.production.js
+++ b/email_template/config.production.js
@@ -19,6 +19,15 @@ module.exports = {
       },
     },
   },
+  locals: {
+    cdnBaseUrl: 'https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/',
+    userIconUrl: "{{ .UserIconURL }}",
+    userName: "{{ .UserName }}",
+    acceptUrl: "{{ .AcceptUrl }}",
+    workspaceName: "{{ .WorkspaceName }}",
+    workspaceMembersCount: "{{ .WorkspaceMembersCount }}",
+    workspaceIconURL: "{{ .WorkspaceIconURL }}",
+  },
   inlineCSS: true,
   removeUnusedCSS: true,
   shorthandCSS: true,
diff --git a/email_template/src/templates/workspace_invitation.html b/email_template/src/templates/workspace_invitation.html
index 46020cea..180b3c94 100644
--- a/email_template/src/templates/workspace_invitation.html
+++ b/email_template/src/templates/workspace_invitation.html
@@ -5,18 +5,18 @@ bodyClass: bg-purple-50
 ---
 
 <x-main>
-  <div class="bg-purple-50 sm:px-4 px-12 sm:py-12 py-24">
+  <div class="bg-purple-50 sm:px-4 px-12 sm:py-12 py-24 text-black">
     <table align="center">
       <tr>
         <td class="w-[552px] max-w-full">
-          <div class="w-full text-center w-12 h-12">
-            <img src="{{ .UserIconURL }}" class="rounded-full overflow-hidden" width="48px" height="48px"
-                 alt="{{ .UserName }}">
+          <div class="w-full text-center">
+            <img src="{{ userIconUrl }}" class="rounded-full overflow-hidden object-cover" width="48px" height="48px"
+                 alt="{{ userName }}">
           </div>
           <p class="w-full text-center break-words whitespace-normal text-2xl">
-            <span class="text-3xl font-bold">{{ .UserName }}</span>
+            <span class="text-3xl font-bold">{{ userName }}</span>
             <span class="mx-2=1">invited to Join</span>
-            <span class="text-3xl font-bold">{{ .WorkspaceName }}</span>
+            <span class="text-3xl font-bold">{{ workspaceName }}</span>
             <span class="mx-2=1">on AppFlowy</span>
           </p>
           <x-divider space-x="20%"/>
@@ -28,10 +28,13 @@ bodyClass: bg-purple-50
                     <td class="w-9/12">
                     </td>
                     <td class="w-3/12">
-                      <div class="rounded-2xl mr-2 w-[60px] h-[60px] bg-white border-2 border-black overflow-hidden">
-                        <img src="{{ .UserIconURL }}"
+                      <div
+                        style="border: 2px solid black;"
+                        class="rounded-2xl mr-2 w-[60px] h-[60px] bg-white overflow-hidden">
+                        <img src="{{ workspaceIconURL }}"
+                             class="overflow-hidden object-cover"
                              width="100%" height="100%"
-                             alt="{{ .UserName }}">
+                             alt="{{ workspaceName }}">
                       </div>
                     </td>
                   </tr>
@@ -40,15 +43,15 @@ bodyClass: bg-purple-50
               </td>
               <td class="w-7/12">
                 <div class="font-bold mb-2">
-                  {{ .WorkspaceName }}
+                  {{ workspaceName }}
                 </div>
-                <div class="text-sm text-slate-500"> {{ .WorkspaceMembersCount }} members</div>
+                <div class="text-sm text-slate-500"> {{ workspaceMembersCount }} members</div>
               </td>
             </tr>
           </table>
           <x-button align="center"
                     class="hover:opacity-90 cursor-pointer h-[34px] !text-xl !leading-[34px] !bg-[#9327ff] !font-normal w-[60%] my-8 rounded-2xl"
-                    href="{{ .AcceptUrl }}">
+                    href="{{ acceptUrl }}">
             Join workspace
           </x-button>
           <p class="m-0 leading-4.5 text-sm text-slate-500 text-center">
@@ -71,7 +74,7 @@ bodyClass: bg-purple-50
         <td class="text-center text-slate-600 text-xs px-6">
           <p class="m-0 mb-4 uppercase cursor-pointer">
             <a href="https://appflowy.io">
-              <img src="images/appflowy-logo.svg" width="150px">
+              <img src="{{ cdnBaseUrl }}images/appflowy-logo.svg" width="150px">
             </a>
           </p>
           <p class="m-0 text-sm">
@@ -86,7 +89,7 @@ bodyClass: bg-purple-50
                           class="hover:opacity-90 mr-2 relative !bg-[#9327ff] !font-normal rounded-2xl"
                           href="https://testflight.apple.com/join/6CexvkDz">
 
-                  <img class="absolute top-3" src="images/appstore-badge.svg" width="16px"
+                  <img class="absolute top-3" src="{{ cdnBaseUrl }}images/appstore-badge.svg" width="16px"
                        alt="Download on the App Store">
                   <span class="text-sm ml-6">Test Flight</span>
                 </x-button>
@@ -95,7 +98,7 @@ bodyClass: bg-purple-50
                 <x-button align="left" class="hover:opacity-90 ml-2 relative !bg-[#9327ff] !font-normal rounded-2xl"
                           href="https://play.google.com/store/apps/details?id=io.appflowy.appflowy">
 
-                  <img class="absolute top-4" src="images/google-play-badge.svg" width="16px"
+                  <img class="absolute top-4" src="{{ cdnBaseUrl }}images/google-play-badge.svg" width="16px"
                        alt="Get it on Google Play">
                   <span class="text-sm ml-6">Google Play</span>
                 </x-button>
@@ -107,23 +110,23 @@ bodyClass: bg-purple-50
           <p class="cursor-default">
             <a href="https://twitter.com/appflowy"
                class="text-indigo-700 [text-decoration:none] mr-4">
-              <img src="images/twitter.svg" width="20" alt="Maizzle">
+              <img src="{{ cdnBaseUrl }}images/twitter.svg" width="20" alt="Maizzle">
             </a>
             <a href="https://www.reddit.com/r/AppFlowy"
                class="text-indigo-700 [text-decoration:none] mr-4">
-              <img src="images/reddit.svg" width="20" alt="Maizzle">
+              <img src="{{ cdnBaseUrl }}images/reddit.svg" width="20" alt="Maizzle">
             </a>
             <a href="https://github.com/AppFlowy-IO/AppFlowy"
                class="text-indigo-700 [text-decoration:none] mr-4">
-              <img src="images/github.svg" width="20" alt="Maizzle">
+              <img src="{{ cdnBaseUrl }}images/github.svg" width="20" alt="Maizzle">
             </a>
             <a href="https://discord.gg/9Q2xaN37tV"
                class="text-indigo-700 [text-decoration:none] mr-4">
-              <img src="images/discord.svg" width="20" alt="Maizzle">
+              <img src="{{ cdnBaseUrl }}images/discord.svg" width="20" alt="Maizzle">
             </a>
             <a href="https://forum.appflowy.io/"
                class="text-indigo-700 [text-decoration:none]">
-              <img src="images/forum.svg" width="20" alt="Maizzle">
+              <img src="{{ cdnBaseUrl }}images/forum.svg" width="20" alt="Maizzle">
             </a>
           </p>
           <p class="text-xs leading-4.5">