Initial commit voor Outlook plugin

src/taskpane/taskpane.js

@@ -0,0 +1,139 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
+ * See LICENSE in the project root for license information.
+ */
+
+/* global document, Office */
+import axios from "axios";
+
+const api_tokens = {
+  dev: "kstlkkRb85jWbS424SXs6bw0rMmJDAcLrUJD05sL",
+  test: "fEKxynKZrM14BqMY1c14vxUqoEdocpMol3woH6Lv",
+  prod: "Uvk3eiHf2NB8ahRC1ijXp0N1YrrhZ1eakIG9gTA0",
+};
+
+// axios conf
+axios.defaults.headers.common["api-key"] = api_tokens.dev;
+axios.defaults.headers.common["api-language"] = "nl";
+
+const localApiUrl = "https://ozrp7bzqco.sharedwithexpose.com/api/zoek_bestelling";
+const orderUrlEdit = "http://localhost:8080/bestellingen/edit/";
+const orderUrlIndex = "http://localhost:8080/bestellingen";
+
+Office.onReady((info) => {
+  if (info.host === Office.HostType.Outlook) {
+    document.getElementById("app-body").style.display = "flex";
+    document.getElementById("run").onclick = run;
+  }
+});
+
+export async function run() {
+  // Set load animation in button
+  loadAnimation(true);
+
+  let searchInfo = {
+    senderLastName: btoa(getLastName(Office.context.mailbox.item.sender.displayName)),
+    senderInitials: btoa(getInitials(Office.context.mailbox.item.sender.displayName)),
+    senderName: btoa(Office.context.mailbox.item.sender.displayName),
+    senderEmail: btoa(Office.context.mailbox.item.sender.emailAddress),
+    senderSubject: btoa(Office.context.mailbox.item.subject),
+    postalCodes: {},
+  };
+
+  searchInfo.postalCodes = await new Promise((resolve) => {
+    Office.context.mailbox.item.body.getAsync("text", function (async) {
+      resolve(getPostalCodesFromText(async.value));
+    });
+  });
+
+  // Make API call to see if we can find an order for the e-mail.
+  let results;
+  await search(searchInfo).then((res) => (results = res));
+
+  // Disable load animation in button
+  loadAnimation(false);
+
+  // Load results via buttons
+  showResults(results);
+}
+
+// Animation function for loader on button
+function loadAnimation(animate) {
+  const loadButton = document.getElementById("run");
+  const loader = document.getElementById("loader");
+  const btnText = document.getElementById("btn-text");
+
+  if (animate) {
+    loadButton.disabled = true;
+    btnText.style.display = "none";
+    loader.style.display = "inline-block";
+  }
+
+  if (!animate) {
+    loadButton.disabled = false;
+    loader.style.display = "none";
+    btnText.style.display = "block";
+  }
+}
+
+// OVAS API call
+async function search(searchInfo) {
+  let results = [];
+
+  await axios
+    .get(localApiUrl, {
+      params: searchInfo,
+    })
+    .then(function (res) {
+      results = res.data.results ?? [];
+    })
+    .catch((err) => err);
+
+  return results;
+}
+
+function getLastName(name) {
+  const nameParts = name.trim().split(" ");
+  const lastName = nameParts.slice(-1)[0]; // Pak het laatste deel als achternaam
+
+  return lastName;
+}
+
+function getInitials(name) {
+  const nameParts = name.trim().split(" ");
+  const firstName = nameParts[0];
+  const initials = firstName.charAt(0).toUpperCase() + ".";
+
+  return initials;
+}
+
+function getPostalCodesFromText(emailBody) {
+  const regex = /\b\d{4}\s?[A-Z]{2}\b/g;
+
+  return btoa(emailBody.match(regex));
+}
+
+function showResults(results) {
+  let resultDiv = document.getElementById("results");
+  resultDiv.innerHTML = "";
+
+  if (results.length > 0) {
+    results.forEach((result) => {
+      resultDiv.innerHTML += resultsFoundButton(result.id, result.lastname);
+    });
+  } else {
+    resultDiv.innerHTML = noResultsFoundButton();
+  }
+}
+
+function resultsFoundButton(id, customer) {
+  return `<button type="button" target="_blank" onclick="location.href='${orderUrlEdit}${id}'" class="result-button" style="text-decoration: none;">
+      <span class="btn-text" style="display: block;">Order ID: ${id} - ${customer}</span>
+    </button>`;
+}
+
+function noResultsFoundButton() {
+  return `<button type="button" onclick="location.href='${orderUrlIndex}'" class="no-result-button" style="text-decoration: none;">
+      <span class="btn-text" style="display: block;">Geen bestellingen gevonden...</span>
+    </button>`;
+}