Add newsletter form

#197

shared/models.py

+import json
 import logging
 
 from django.db import models
@@ -48,12 +49,13 @@ class NewsletterFormMixin(models.Model):
     def newsletter_post(self, posted):
         client_response = HttpResponse()
         if posted.method == "POST":
-            mailtrain_request = {"EMAIL": posted.POST["email"]}
-            if "first_name" in posted.POST and "last_name" in posted.POST:
+            body = json.loads(posted.body)
+            mailtrain_request = {"EMAIL": body["email"]}
+            if "first_name" in body and "last_name" in body:
                 mailtrain_request.update(
                     {
-                        "MERGE_FIRST_NAME": posted.POST["first_name"],
-                        "MERGE_LAST_NAME": posted.POST["last_name"],
+                        "MERGE_FIRST_NAME": body["first_name"],
+                        "MERGE_LAST_NAME": body["last_name"],
                     }
                 )
             if "force_subscribe" in posted.GET:
@@ -62,15 +64,16 @@ class NewsletterFormMixin(models.Model):
                         "FORCE_SUBSCRIBE": "yes",
                     }
                 )
-            if "timezone" in posted.POST:
-                mailtrain_request.update({"TIMEZONE": posted.POST["timezone"]})
+            if "timezone" in body:
+                mailtrain_request.update({"TIMEZONE": body["timezone"]})
             if self.require_confirmation:
                 mailtrain_request.update({"REQUIRE_CONFIRMATION": "yes"})
             response = request(
                 "POST",
                 f"https://mailtrain.pirati.cz/api/subscribe/{self.subscription_id}?access_token={self.access_token}",
-                mailtrain_request,
+                json=mailtrain_request,
             )
+            print(response.json())
             if "error" in response.json():
                 client_response.status_code = 500
             else:

shared/static/shared/js/vue-formulate-helper.js

@@ -5,13 +5,18 @@ Vue.use(VueFormulate, {
   locale: "cs",
 });
 
+const errorMessage = ["Vyskytla se chyba při zpracování požadavku, omlouváme se"];
+
+Vue.options.data ||= {};
+Vue.options.data.mailtrainerrors ||= [];
 Vue.options.methods ||= {};
-Vue.options.methods.mailtrainsubmit = function (data) {
+Vue.options.methods.mailtrainsubmit = async function (data) {
   const csrftoken = $("[name='csrfmiddlewaretoken']", this.$el).val();
   const headers = new Headers();
   headers.append('X-CSRFToken', csrftoken);
 
-  return fetch(this.$el.dataset.url, {
+  try {
+    const response = await fetch(this.$el.dataset.url, {
       method: "POST",
       body: JSON.stringify({
         ...data,
@@ -19,4 +24,10 @@ Vue.options.methods.mailtrainsubmit = function (data) {
       headers: headers,
       credentials: "include",
     });
+    if (response.status >= 400) {
+      Vue.options.data.mailtrainerrors = errorMessage;
+    }
+  } catch {
+    Vue.options.data.mailtrainerrors = errorMessage;
+  }
 };

shared/templates/shared/blocks/newsletter_subscription_block.html

@@ -3,9 +3,9 @@
 <div class="__js-root">
     <ui-app inline-template>
         {% if page.has_newsletter_form %}
-            <div data-url="{{ request.scheme }}://{{ request.get_host }}{% pageurl page %}{% routablepageurl page 'newsletter' %}" class="flex flex-row flex-wrap xl:items-center mt-20 xl:mt-0">
+            <div data-url="{% routablepageurl page 'newsletter' %}" class="flex flex-row flex-wrap xl:items-center mt-20 xl:mt-0">
         {% else %}
-            <div data-url="{{ request.scheme }}://{{ request.get_host }}{% routablepageurl page.root_page 'newsletter' %}" class="flex flex-row flex-wrap xl:items-center mt-20 xl:mt-0">
+            <div data-url="{% routablepageurl page.root_page 'newsletter' %}" class="flex flex-row flex-wrap xl:items-center mt-20 xl:mt-0">
         {% endif %}
             <noscript>
                 <ul class="flex flex-col w-full drop-shadow-lg">
@@ -34,7 +34,8 @@
                     {{ self.design.subtitle }}
                 </span>
                 <div class="flex flex-col items-start">
-                    <formulate-form @submit="mailtrainsubmit" #default="{ isLoading, hasErrors }">
+                    <formulate-form @submit="mailtrainsubmit" #default="{ isLoading }" :form-errors="mailtrainerrors">
+                        <formulate-errors></formulate-errors>
                         {% csrf_token %}
                         {% if self.config.send_timezone %}
                             <formulate-input
@@ -51,15 +52,15 @@
                             ></formulate-input>
                         {% endif %}
                         {% if self.config.show_name_input %}
-                            <formulate-input type="text" name="first_name" :input-class="() => ['text-input', 'bg-white', 'form-field__control', 'mb-3', 'w-full']" label="{{ self.design.labels.first_name }}"
+                            <formulate-input type="text" name="first_name" validation-name="Křestní jméno" :input-class="() => ['text-input', 'bg-white', 'form-field__control', 'mb-3', 'w-full']" label="{{ self.design.labels.first_name }}"
                                 placeholder="{{ self.design.labels.first_name }}" validation="required" error-behavior="blur"
                                 label-class="sr-only"></formulate-input>
-                            <formulate-input type="text" name="last_name" :input-class="() => ['text-input', 'bg-white', 'form-field__control', 'mb-3', 'w-full']" label="{{ self.design.labels.last_name }}"
+                            <formulate-input type="text" name="last_name" validation-name="Příjmení" :input-class="() => ['text-input', 'bg-white', 'form-field__control', 'mb-3', 'w-full']" label="{{ self.design.labels.last_name }}"
                                 placeholder="{{ self.design.labels.last_name }}" validation="required" error-behavior="blur"
                                 label-class="sr-only"></formulate-input>
                         {% endif %}
                         <formulate-input type="email" name="email" :input-class="() => ['text-input', 'bg-white', 'form-field__control', 'mb-3', 'w-full']" label="{{ self.design.labels.email }}"
-                            placeholder="{{ self.design.labels.email }}" validation="^required|email" error-behavior="blur"
+                            placeholder="{{ self.design.labels.email }}" validation-name="E-mail" validation="^required|email" error-behavior="blur"
                             label-class="sr-only"></formulate-input>
                         <formulate-input type="checkbox" name="consent" validation-name="souhlas s osobními údaji" :wrapper-class="() => []" :input-class="() => []" :element-class="() => ['checkbox', 'form-field__control', 'flex', 'items-center', 'mb-3']" validation="required" error-behavior="blur">
                             <template #suffix="{ id }">