Modify Self-Hosted email template (#315)

antoinejaussoin · Oct 13, 2021 · 303fbd4 · 303fbd4
1 parent 4691ac5
commit 303fbd4
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 17 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -490,8 +490,10 @@ <h5 class="mb-0">Private Sessions (Pro Feature ⭐️)</h5>
                   <div class="section-heading text-center mb-5">
                       <span class="text-uppercase color-secondary sub-title">Self Hosted</span>
                       <h2>Retrospected on your premises</h2>
-                      <p>Keep complete control of your data by self-hosting Retrospected. One-time fee, unlimited updates.</p>
-
+                      <p>Keep complete control of your data by self-hosting Retrospected. One-time fee, unlimited updates.<br />
+                      Get up and running with our 
+                      <a target="_blank" href="https://docs.retrospected.com/docs/self-hosting/quick-start">amazing documentation</a>
+                      in no time.</p>
                   </div>
               </div>
           </div>
@@ -518,7 +520,7 @@ <h5>Complete control</h5>
                       </div>
                       <div class="icon-text">
                           <h5>Easy to install</h5>
-                          <p class="mb-0">After purchase, you will get an email with a pre-populated docker-compose file to run. It works out of the box.</p>
+                          <p class="mb-0">After purchase, you will get an email with a pre-populated docker-compose file to run. And some amazing <a target="_blank" href="https://docs.retrospected.com/docs/self-hosting/quick-start">docs</a>.</p>
                       </div>
                   </div>
                   <div class="d-flex align-items-start">

diff --git a/frontend/src/views/subscribe/SubscribePage.tsx b/frontend/src/views/subscribe/SubscribePage.tsx
@@ -36,7 +36,7 @@ function SubscriberPage() {
   const query = queryString.parse(window.location.search);
   const defaultProduct: Plan | null = query.product
     ? (query.product as Plan)
-    : null;
+    : 'team';
   const [currency, setCurrency] = useState<Currency>('eur');
   const [plan, setPlan] = useState<Plan | null>(defaultProduct);
   const product = useMemo(() => {

diff --git a/self-hosting/email.template.html b/self-hosting/email.template.html
@@ -1,5 +1,6 @@
 <html>
   <body>
+    <!-- SEND GRID START -->
     <style>
       * {
         font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
@@ -47,16 +48,30 @@
 
       .warning {
         background-color: #fff1f2;
+      }
+
+      .warning b {
+        color: red;
+      }
+
+      .info {
+        background-color: #e1f5fe;
+      }
+
+      .info b {
+        color: #01579b;
+      }
+
+      .alert {
         padding: 15px;
+        margin-top: 20px;
       }
-      .warning h4 {
+      .alert h4 {
         font-size: 1.2rem;
         font-weight: bold;
         margin: 2px 0;
       }
-      .warning b {
-        color: red;
-      }
+
       section {
         margin-left: 10px;
         margin-bottom: 30px;
@@ -111,9 +126,32 @@ <h1>Hello {{name}}!</h1>
 
     <div class="key">{{key}}</div>
 
+    <div class="alert info">
+      <h4>Quick Start</h4>
+      <p>
+        You can be up and running in 5 minutes by using your personalised
+        <b>docker-compose</b> file below.<br />
+        Alternatively, if you would like to customise it or get more details
+        about the installation, please visit our
+        <a
+          href="https://docs.retrospected.com/docs/self-hosting/quick-start?email={{email}}&amp;licence={{key}}"
+          >documentation website</a
+        >.<br />
+        You will also find useful information about
+        <a href="https://docs.retrospected.com/docs/self-hosting/backup"
+          >backup</a
+        >,
+        <a href="https://docs.retrospected.com/docs/self-hosting/pgadmin"
+          >database management</a
+        >, etc.
+      </p>
+    </div>
+
+    <p style="margin-top: 30px"></p>
+
     <hr />
 
-    <h2>Installation</h2>
+    <h2>Quick Start</h2>
 
     <p>
       You'll be up and running in no time. Your
@@ -153,7 +191,7 @@ <h3>2 - Install your docker-compose file</h3>
         </li>
         <li>You're done!</li>
       </ol>
-      <div class="warning">
+      <div class="alert warning">
         <h4>Warning</h4>
         <p>
           If you wish to change the default passwords, it is very important that
@@ -173,21 +211,23 @@ <h3>3 - Enjoy!</h3>
         <span class="file">docker-compose.yml</span> file (1800 by default).
       </p>
       <p>
-        You can also access <a href="https://www.pgadmin.org">PGAdmin</a>, which
-        will give you access to your database. PGAdmin is available on port 1801
-        (by default), and you can use the following credentials if you didn't
-        modify the defaults:
+        You can also access
+        <a href="https://docs.retrospected.com/docs/self-hosting/pgadmin"
+          >PGAdmin</a
+        >, which will give you access to your database. PGAdmin is available on
+        port 1801 (by default), and you can use the following credentials if you
+        didn't modify the defaults:
       </p>
       <ul>
         <li>Username: <b>{{email}}</b></li>
         <li>Password: <b>{{pgAdminPassword}}</b></li>
       </ul>
       <p>
-        If you want more configuration options, have a look at the full
+        If you want more configuration options, have a look at our
         <span class="file">docker-compose.yml</span>
         <a
-          href="https://github.com/antoinejaussoin/retro-board/blob/develop/docker-compose.example.yml"
-          >here</a
+          href="https://docs.retrospected.com/docs/self-hosting/quick-start?email={{email}}&amp;licence={{key}}"
+          >editor here</a
         >.
       </p>
     </section>
@@ -291,5 +331,7 @@ <h3>3 - Enjoy!</h3>
 <span class="hljs-attr">  pgadmin:</span></pre>
 
     <!-- DOCKER COMPOSE FILE END -->
+
+    <!-- SEND GRID END -->
   </body>
 </html>