From f95c8b436eec1141a82ec9b34691e1f7b8c24bc4 Mon Sep 17 00:00:00 2001
From: LorenzoJokhan <lorenzoluk@gmail.com>
Date: Thu, 9 Feb 2023 15:53:43 +0100
Subject: [PATCH] Added forms to the settings/ideas page in admin panel to
 change mail content of concept ideas

---
 config/site.js                                | 48 +++++++++
 templates/site/settings/ideas.html            | 39 ++++++++
 .../modal-concept-to-published-email.html     | 99 +++++++++++++++++++
 .../modal-thankyou-concept-email.html         | 97 ++++++++++++++++++
 4 files changed, 283 insertions(+)
 create mode 100644 templates/site/settings/modal-concept-to-published-email.html
 create mode 100644 templates/site/settings/modal-thankyou-concept-email.html

diff --git a/config/site.js b/config/site.js
index 4306431..03a202e 100644
--- a/config/site.js
+++ b/config/site.js
@@ -163,6 +163,54 @@ exports.configSchema = {
       label: 'Template (variables available)'
     },
   ],
+  conceptEmail: [
+    {
+      parentKey: 'ideas',
+      key: 'from',
+      type: 'string', // todo: add type email/list of emails
+      default: '',
+      label: "From Address"
+    },
+    {
+      parentKey: 'ideas',
+      key: 'subject',
+      type: 'string',
+      default: '',
+      label: 'Subject line'
+    },
+    {
+      parentKey: 'ideas',
+      key: 'template',
+      type: 'string',
+      default: '',
+      textarea: true,
+      label: 'Template (variables available)'
+    },
+  ],
+  conceptToPublishedEmail: [
+    {
+      parentKey: 'ideas',
+      key: 'from',
+      type: 'string', // todo: add type email/list of emails
+      default: '',
+      label: "From Address"
+    },
+    {
+      parentKey: 'ideas',
+      key: 'subject',
+      type: 'string',
+      default: '',
+      label: 'Subject line'
+    },
+    {
+      parentKey: 'ideas',
+      key: 'template',
+      type: 'string',
+      default: '',
+      textarea: true,
+      label: 'Template (variables available)'
+    },
+  ],
   categories: [
     {
       key: 'themes',
diff --git a/templates/site/settings/ideas.html b/templates/site/settings/ideas.html
index 58fbf5e..dce0bac 100644
--- a/templates/site/settings/ideas.html
+++ b/templates/site/settings/ideas.html
@@ -45,6 +45,45 @@ <h6 class="section-header">
         {% include 'site/settings/modal-thankyou-email.html' %}
       </div>
 
+
+      <div class="card card-openstad">
+
+        <form method="POST" action="/admin/site/{{site.id}}">
+          <fieldset>
+              <legend><span>{{ __('Submitted a concept plan e-mail ') }}</span></legend>
+              {{ renderFields(siteConfigSchema.conceptEmail, site.config.ideas.conceptEmail, 'config[conceptEmail]') }}
+
+              <button class="btn btn-secondary" data-target="#ideaConceptThankYouModal" data-toggle="modal" type="button">More info on the E-mail Template</button>
+
+              <div class="form-buttons-w">
+              <button class="btn btn-outline-primary" type="submit">Opslaan</button>
+              </div>
+            </fieldset>
+          <input type="hidden" name="_csrf" value="{{csrfToken}}">
+        </form>
+
+        {% include 'site/settings/modal-thankyou-concept-email.html' %}
+      </div>
+
+
+      <div class="card card-openstad">
+
+        <form method="POST" action="/admin/site/{{site.id}}">
+          <fieldset>
+              <legend><span>{{ __('Published a concept plan e-mail ') }}</span></legend>
+              {{ renderFields(siteConfigSchema.conceptToPublishedEmail, site.config.ideas.conceptToPublishedEmail, 'config[conceptToPublishedEmail]') }}
+
+              <button class="btn btn-secondary" data-target="#ideaConceptToPublishedModal" data-toggle="modal" type="button">More info on the E-mail Template</button>
+
+              <div class="form-buttons-w">
+              <button class="btn btn-outline-primary" type="submit">Opslaan</button>
+              </div>
+            </fieldset>
+          <input type="hidden" name="_csrf" value="{{csrfToken}}">
+        </form>
+
+        {% include 'site/settings/modal-concept-to-published-email.html' %}
+      </div>
       </div>
     </div>
   </div>
diff --git a/templates/site/settings/modal-concept-to-published-email.html b/templates/site/settings/modal-concept-to-published-email.html
new file mode 100644
index 0000000..dfe2e6b
--- /dev/null
+++ b/templates/site/settings/modal-concept-to-published-email.html
@@ -0,0 +1,99 @@
+<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="ideaConceptToPublishedModal" role="dialog" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">
+          E-mail Template
+        </h5>
+        <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true"> &times;</span></button>
+      </div>
+      <div class="modal-body">
+        <p>
+        The e-mail template can be written in html, variable are rendered with the templating engine nunjucks.
+        Certain variables are present. The can be used as follows: {% raw %}{{variable}}{% endraw %}
+        </p>
+        <p>
+          Following variables are available:
+          <table class="table">
+            <tr>
+              <td>
+                 <b> user.fullName </b>
+              </td>
+              <td>
+                  Fullname of user submitted the idea
+              </td>
+            </tr>
+            <tr>
+              <td>
+                 <b> URL </b>
+              </td>
+              <td>
+                 The url of the website the idea was submitted to
+              </td>
+            </tr>
+            <tr>
+              <td>
+                 <b> HOST </b>
+              </td>
+              <td>
+                 The website, without www, the which idea was submitted to.
+              </td>
+            </tr>
+            <tr>
+              <td>
+                 <b> idea.id </b>
+              </td>
+              <td>
+                 The id of a submitted idea
+              </td>
+            </tr>
+            <tr>
+              <td>
+                 <b> idea.title </b>
+              </td>
+              <td>
+                 The title of a submitted idea
+              </td>
+            </tr>
+
+          </table>
+          <br />
+        <p>
+        This is an example template:
+        </p>
+        <textarea class="form-control" style="min-height: 400px;">{% raw %}<h4> Beste {{user.fullName | default('indiener')}},
+          <br /><br />
+          Bedankt voor aanpassen van uw concept naar een definitief plan op <a href="{{URL}}">{{SITENAME}}</a>.. Uw plan is goed ontvangen.
+          
+          Houd de site van {{HOSTNAME}} in de gaten voor meer informatie over het project. Mocht u nog vragen hebben, stuur dan een e-mail naar {{EMAIL}}.
+          <br />
+          <br />
+            <p>
+                Hartelijke groet,<br />
+                <strong>Team {{SITENAME}}</strong>
+            </p>
+</p>{% endraw %}</textarea>
+        <br />
+        <h3> How to link to the page of submitted idea? </h3>
+        You can add a link to your website on the page where submissions are shown and add the ID to it.
+        For instance for westbegroot.nl has the plan page for submission so a link to the page of a submitted idea is structured as follows:
+        https://www.westbegroot.nl/plan/10
+        This a working example for Westbegroot.nl:
+        <textarea class="form-control" style="min-height: 150px;">{% raw %}<a href="https://www.westbegroot.nl/plan/{{idea.id}}">
+        {{idea.title}}
+</a>{% endraw %}</textarea>
+        <br />
+        <h3> How to add an image? </h3>
+        If you upload an image to the CMS and get the url. For instance header image:
+        https://westbegroot.amsterdam.nl/uploads/attachments/ck07xgjwz00pa2u3w6yvaclno-wb2020-headerfoto-2x-v2.full.png
+        Make sure image are not too big, preferably around twice the size it's displayed in the email.
+        Setting width="560" will make the image stretch full width for old email clients, newer ones support 100% which makes the image responsive.
+
+        <textarea class="form-control" style="min-height: 200px;">{% raw %}<img src="https://westbegroot.amsterdam.nl/uploads/attachments/ck07xgjwz00pa2u3w6yvaclno-wb2020-headerfoto-2x-v2.full.png" width="560" style="display:block;width:100%">{% endraw %}</textarea>
+      </div>
+        <div class="modal-footer">
+        <button class="btn btn-secondary" data-dismiss="modal" type="button"> Close</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/templates/site/settings/modal-thankyou-concept-email.html b/templates/site/settings/modal-thankyou-concept-email.html
new file mode 100644
index 0000000..91fc629
--- /dev/null
+++ b/templates/site/settings/modal-thankyou-concept-email.html
@@ -0,0 +1,97 @@
+<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="ideaConceptThankYouModal" role="dialog" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">
+          E-mail Template
+        </h5>
+        <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true"> &times;</span></button>
+      </div>
+      <div class="modal-body">
+        <p>
+        The e-mail template can be written in html, variable are rendered with the templating engine nunjucks.
+        Certain variables are present. The can be used as follows: {% raw %}{{variable}}{% endraw %}
+        </p>
+        <p>
+          Following variables are available:
+          <table class="table">
+            <tr>
+              <td>
+                 <b> user.fullName </b>
+              </td>
+              <td>
+                  Fullname of user submitted the idea
+              </td>
+            </tr>
+            <tr>
+              <td>
+                 <b> URL </b>
+              </td>
+              <td>
+                 The url of the website the idea was submitted to
+              </td>
+            </tr>
+            <tr>
+              <td>
+                 <b> HOST </b>
+              </td>
+              <td>
+                 The website, without www, the which idea was submitted to.
+              </td>
+            </tr>
+            <tr>
+              <td>
+                 <b> idea.id </b>
+              </td>
+              <td>
+                 The id of a submitted idea
+              </td>
+            </tr>
+            <tr>
+              <td>
+                 <b> idea.title </b>
+              </td>
+              <td>
+                 The title of a submitted idea
+              </td>
+            </tr>
+
+          </table>
+          <br />
+        <p>
+        This is an example template:
+        </p>
+        <textarea class="form-control" style="min-height: 400px;">{% raw %}<h4> Beste {{user.fullName | default('indiener')}},
+          <br /><br />
+          U heeft een CONCEPT plan geplaatst op <a href="{{URL}}">{{SITENAME}}</a>. Uw plan is nog niet definitief ingediend.Vergeet niet om uw concept definitief te maken voor de deadline. U kunt het plan <b><a href={{inzendingURL}}>hier</a></b> bewerken en indienen.
+          <br />
+          <br />
+            <p>
+                Hartelijke groet,<br />
+                <strong>Team {{SITENAME}}</strong>
+            </p>
+</p>{% endraw %}</textarea>
+        <br />
+        <h3> How to link to the page of submitted idea? </h3>
+        You can add a link to your website on the page where submissions are shown and add the ID to it.
+        For instance for westbegroot.nl has the plan page for submission so a link to the page of a submitted idea is structured as follows:
+        https://www.westbegroot.nl/plan/10
+        This a working example for Westbegroot.nl:
+        <textarea class="form-control" style="min-height: 150px;">{% raw %}<a href="https://www.westbegroot.nl/plan/{{idea.id}}">
+        {{idea.title}}
+</a>{% endraw %}</textarea>
+        <br />
+        <h3> How to add an image? </h3>
+        If you upload an image to the CMS and get the url. For instance header image:
+        https://westbegroot.amsterdam.nl/uploads/attachments/ck07xgjwz00pa2u3w6yvaclno-wb2020-headerfoto-2x-v2.full.png
+        Make sure image are not too big, preferably around twice the size it's displayed in the email.
+        Setting width="560" will make the image stretch full width for old email clients, newer ones support 100% which makes the image responsive.
+
+        <textarea class="form-control" style="min-height: 200px;">{% raw %}<img src="https://westbegroot.amsterdam.nl/uploads/attachments/ck07xgjwz00pa2u3w6yvaclno-wb2020-headerfoto-2x-v2.full.png" width="560" style="display:block;width:100%">{% endraw %}</textarea>
+      </div>
+        <div class="modal-footer">
+        <button class="btn btn-secondary" data-dismiss="modal" type="button"> Close</button>
+      </div>
+    </div>
+  </div>
+</div>