send email v1

site/blueprints/pages/email.yml

@@ -6,21 +6,13 @@ image:
   back: black
   color: white
   icon: email
-options:
-  changeStatus: false
 
 tabs:
   contentTab:
     fields:
-      month:
+      body:
-        label: Mois
+        label: Contenu
-        type: date
+        type: writer
-        display: "MM/YYYY"
-        default: today
-        width: 1/4
       sendBtn:
         type: send-button
         width: 1/4
-      content:
-        label: Contenu
-        type: writer

site/blueprints/pages/newsletter.yml

@@ -21,5 +21,4 @@ tabs:
             label: Emails
             type: pages
             template: email
-            info: "{{ page.month.toDate('M Y') }}"
+            info: "{{ page.status == 'listed' ? 'envoyé' : 'brouillon' }}"
-            sortBy: month desc

site/config/config.php

@@ -11,7 +11,9 @@ return array(
       'type'     => 'smtp',
       'host'     => 'mail.infomaniak.com',
       'port'     => 465,
-      'security' => true
+      'auth' => true,
+      'username' => 'info@actuel-inactuel.fr',
+      'password' => 'v!Vr$#JH7quJ35'
     ]
     ],
   'routes' => array(

site/config/routes/send-newsletter.php

@@ -8,20 +8,28 @@ return [
         $data = json_decode($jsonRequest);
 
         $kirby = kirby();
+        $emailPage = page("inscription")->childrenAndDrafts()->find($data->pageUri);
 
-      $emailPage = page($data->uri);
+        $to = $data->isTest ? $kirby->users() : page("inscription")->subscribers()->toStructure()->pluck("email", true, true);
-      $content = $emailPage->content()->kt();
+        $subject = $data->isTest ? "[TEST] - " . (string) $emailPage->title() : (string) $emailPage->title();
         
         try {
             if ($kirby->email([
                 'from'    => "info@actuel-inactuel.fr",
-                'to'      => page("inscription")->toStructure()->pluck("email"),
+                'to'      => $to,
-                'subject' => $data->subject,
+                'cc'      => 'contact@adrien-payet.fr',
-                'body'    => [
+                'subject' => $subject,
-                  "html" => $emailPage->content()
+                'template' => 'newsletter',
-                ],
+                'data'    => [
+                    "body" => $emailPage->body()
+                ]
             ])->isSent()) {
-                return json_encode(['status' => 'success', 'message' => 'Email envoyé avec succès.']);
+                $emailPage->changeStatus("listed");
+                return json_encode([
+                    'status' => 'success', 
+                    'message' => 
+                    'Email envoyé avec succès.'
+                ]);
             } else {
                 return json_encode([
                     "status" => "error",

site/plugins/send-button/index.css

@@ -1,4 +1,16 @@
 
+.wrapper[data-v-4847e765] {
+  display: flex;
+  gap: 10vw;
+}
+.k-field-footer[data-v-4847e765] {
+  width: 15rem;
+}
+@media screen and (max-width: 800px) {
+.k-field-footer[data-v-4847e765] {
+    width: 9rem;
+}
+}
 @media screen and (min-width: 533px) {
 button[data-v-4847e765] {
     margin-top: 2.15rem;

site/plugins/send-button/index.js

@@ -2,7 +2,7 @@
   "use strict";
   function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
     var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
-    if (render) {
+    {
       options.render = render;
       options.staticRenderFns = staticRenderFns;
       options._compiled = true;
@@ -18,31 +18,93 @@
   const _sfc_main = {
     __name: "SendButtonField",
     props: {
-      pageUri: String
+      pageUri: String,
+      pageStatus: String
     },
     setup(__props) {
       const { pageUri } = __props;
-      const text = Vue.ref("Envoyer");
+      const testBtnState = Vue.ref({
+        icon: "plane",
+        text: "Tester",
+        theme: "blue",
+        error: null
+      });
+      const sendBtnState = Vue.ref({
+        icon: "plane",
+        text: "Envoyer",
+        theme: "aqua",
+        error: null
+      });
+      async function send(event, isTest = false) {
+        event.preventDefault();
+        const currentBtnState = isTest ? testBtnState : sendBtnState;
+        currentBtnState.value = {
+          theme: "orange",
+          text: "En cours…",
+          icon: "loader",
+          error: null
+        };
         const headers = {
           method: "POST",
           body: JSON.stringify({
-          pageUri
+            pageUri,
+            isTest
           })
         };
-      function send(event) {
+        try {
-        event.preventDefault();
+          const response = await fetch("/send-newsletter.json", headers);
-        fetch("/send-newsletter.json", headers).then((res) => res.json()).then((json) => console.log(json));
+          const data = await response.json();
+          if (data.status === "success") {
+            currentBtnState.value = {
+              theme: "green",
+              icon: "check",
+              text: isTest ? "Test envoyé" : "Envoi réussi",
+              error: null
+            };
+            if (!isTest) {
+              setTimeout(() => {
+                location.href = location.href;
+              }, 2e3);
+            } else {
+              currentBtnState.value = {
+                icon: "plane",
+                text: "Re-tester",
+                theme: "blue",
+                error: null
+              };
             }
-      return { __sfc: true, text, headers, send };
+          } else {
+            throw new Error(data.message || "Erreur inconnue");
+          }
+        } catch (error) {
+          currentBtnState.value = {
+            theme: "red",
+            icon: "alert",
+            text: isTest ? "Échec du test" : "Erreur",
+            error: error.message
+          };
+        }
+      }
+      return { __sfc: true, testBtnState, sendBtnState, send };
     }
   };
   var _sfc_render = function render() {
     var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
-    return _c("k-button", { attrs: { "variant": "filled", "icon": "plane" }, on: { "click": function($event) {
+    return _vm.pageStatus === "draft" ? _c("div", { staticClass: "wrapper" }, [_c("div", { staticClass: "test-wrapper" }, [_c("k-button", { staticStyle: { "width": "max-content" }, attrs: { "variant": "filled", "help": "test", "theme": _setup.testBtnState.theme, "icon": _setup.testBtnState.icon }, on: { "click": function($event) {
+      return _setup.send($event, true);
+    } } }, [_vm._v(_vm._s(_setup.testBtnState.text))]), _vm._m(0), _setup.testBtnState.error ? _c("k-box", { staticStyle: { "margin-top": "var(--spacing-1)" }, attrs: { "theme": "error" } }, [_vm._v(_vm._s(_setup.testBtnState.error))]) : _vm._e()], 1), _c("div", { staticClass: "send-wrapper" }, [_c("k-button", { attrs: { "variant": "filled", "theme": _setup.sendBtnState.theme, "icon": _setup.sendBtnState.icon }, on: { "click": function($event) {
       return _setup.send($event);
-    } } }, [_vm._v(_vm._s(_setup.text))]);
+    } } }, [_vm._v(_vm._s(_setup.sendBtnState.text))]), _setup.sendBtnState.error ? _c("k-box", { staticStyle: { "margin-top": "var(--spacing-1)" }, attrs: { "theme": "error" } }, [_vm._v(_vm._s(_setup.sendBtnState.error))]) : _vm._e(), _vm._m(1)], 1)]) : _vm._e();
   };
-  var _sfc_staticRenderFns = [];
+  var _sfc_staticRenderFns = [function() {
+    var _vm = this, _c = _vm._self._c;
+    _vm._self._setupProxy;
+    return _c("footer", { staticClass: "k-field-footer" }, [_c("div", { staticClass: "k-help k-field-help k-text" }, [_c("p", [_vm._v(" Envoie seulement aux "), _c("a", { attrs: { "href": "/panel/users", "title": "voir la liste" } }, [_vm._v("éditeurs")]), _vm._v(". ")])])]);
+  }, function() {
+    var _vm = this, _c = _vm._self._c;
+    _vm._self._setupProxy;
+    return _c("footer", { staticClass: "k-field-footer" }, [_c("div", { staticClass: "k-help k-field-help k-text" }, [_c("strong", [_vm._v("⚠ Envoie à tous les abonnés.")])])]);
+  }];
   _sfc_render._withStripped = true;
   var __component__ = /* @__PURE__ */ normalizeComponent(
     _sfc_main,

site/plugins/send-button/index.php

@@ -7,6 +7,9 @@ Kirby::plugin('adrienpayet/send-button', [
         'pageUri' => function () {
           return $this->model()->uri();
         },
+        'pageStatus' => function () {
+          return $this->model()->status();
+        },
       ]
     ]
   ]

site/plugins/send-button/src/components/SendButtonField.vue

@@ -1,7 +1,51 @@
 <template>
-  <k-button @click="send($event)" variant="filled" icon="plane">{{
+  <div class="wrapper" v-if="pageStatus === 'draft'">
-    text
+    <div class="test-wrapper">
-  }}</k-button>
+      <k-button
+        @click="send($event, true)"
+        style="width: max-content"
+        variant="filled"
+        help="test"
+        :theme="testBtnState.theme"
+        :icon="testBtnState.icon"
+        >{{ testBtnState.text }}</k-button
+      >
+      <footer class="k-field-footer">
+        <div class="k-help k-field-help k-text">
+          <p>
+            Envoie seulement aux
+            <a href="/panel/users" title="voir la liste">éditeurs</a>.
+          </p>
+        </div>
+      </footer>
+      <k-box
+        v-if="testBtnState.error"
+        theme="error"
+        style="margin-top: var(--spacing-1)"
+        >{{ testBtnState.error }}</k-box
+      >
+    </div>
+    <div class="send-wrapper">
+      <k-button
+        @click="send($event)"
+        variant="filled"
+        :theme="sendBtnState.theme"
+        :icon="sendBtnState.icon"
+        >{{ sendBtnState.text }}</k-button
+      >
+      <k-box
+        v-if="sendBtnState.error"
+        theme="error"
+        style="margin-top: var(--spacing-1)"
+        >{{ sendBtnState.error }}</k-box
+      >
+      <footer class="k-field-footer">
+        <div class="k-help k-field-help k-text">
+          <strong>⚠ Envoie à tous les abonnés.</strong>
+        </div>
+      </footer>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -9,26 +53,96 @@ import { ref } from "vue";
 
 const { pageUri } = defineProps({
   pageUri: String,
+  pageStatus: String,
 });
 
-const text = ref("Envoyer");
+const testBtnState = ref({
+  icon: "plane",
+  text: "Tester",
+  theme: "blue",
+  error: null,
+});
 
-const headers = {
+const sendBtnState = ref({
+  icon: "plane",
+  text: "Envoyer",
+  theme: "aqua",
+  error: null,
+});
+
+async function send(event, isTest = false) {
+  event.preventDefault();
+
+  const currentBtnState = isTest ? testBtnState : sendBtnState;
+
+  currentBtnState.value = {
+    theme: "orange",
+    text: "En cours…",
+    icon: "loader",
+    error: null,
+  };
+
+  const headers = {
     method: "POST",
     body: JSON.stringify({
       pageUri,
+      isTest,
     }),
-};
+  };
 
-async function send(event) {
+  try {
-  event.preventDefault();
     const response = await fetch("/send-newsletter.json", headers);
     const data = await response.json();
-  console.log(data);
+
+    if (data.status === "success") {
+      currentBtnState.value = {
+        theme: "green",
+        icon: "check",
+        text: isTest ? "Test envoyé" : "Envoi réussi",
+        error: null,
+      };
+
+      if (!isTest) {
+        setTimeout(() => {
+          location.href = location.href;
+        }, 2000);
+      } else {
+        currentBtnState.value = {
+          icon: "plane",
+          text: "Re-tester",
+          theme: "blue",
+          error: null,
+        };
+      }
+    } else {
+      throw new Error(data.message || "Erreur inconnue");
+    }
+  } catch (error) {
+    currentBtnState.value = {
+      theme: "red",
+      icon: "alert",
+      text: isTest ? "Échec du test" : "Erreur",
+      error: error.message,
+    };
+  }
 }
 </script>
 
 <style scoped>
+.wrapper {
+  display: flex;
+  gap: 10vw;
+}
+
+.k-field-footer {
+  width: 15rem;
+}
+
+@media screen and (max-width: 800px) {
+  .k-field-footer {
+    width: 9rem;
+  }
+}
 @media screen and (min-width: 533px) {
   button {
     margin-top: 2.15rem;

site/templates/emails/newsletter.html.php

@@ -0,0 +1,3 @@
+<?= $body ?>
+
+<em>Vous pouvez demander votre désinscription en répondant directement à ce mail.</em>