send email v1

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

@@ -1,7 +1,51 @@
 <template>
-  <k-button @click="send($event)" variant="filled" icon="plane">{{
-    text
-  }}</k-button>
+  <div class="wrapper" v-if="pageStatus === 'draft'">
+    <div class="test-wrapper">
+      <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 = {
-  method: "POST",
-  body: JSON.stringify({
-    pageUri,
-  }),
-};
+const sendBtnState = ref({
+  icon: "plane",
+  text: "Envoyer",
+  theme: "aqua",
+  error: null,
+});
 
-async function send(event) {
+async function send(event, isTest = false) {
   event.preventDefault();
-  const response = await fetch("/send-newsletter.json", headers);
-  const data = await response.json();
-  console.log(data);
+
+  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,
+    }),
+  };
+
+  try {
+    const response = await fetch("/send-newsletter.json", headers);
+    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;
+        }, 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;