script.js

// Zendesk authorization to GET and POST a ticket to tickets.json
const zendeskSubdomain = 'yoursubdomain';
const zendeskEmail = 'youradminemail@company.com';
const zendeskToken = 'yu2U7HCGRBqqoT5JxiQdbNKGvjxMEHwMiBXIBtk1';

// Set up the fetch options
const fetchOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Basic ' + btoa(zendeskEmail + '/token:' + zendeskToken)
  },
  mode: 'cors'
};

// Display message and feedback form for article downvotes
document.addEventListener("DOMContentLoaded", () => {
  if (document.querySelector(".article-votes-controls")) {
    const voteButtons = document.querySelectorAll(".article-vote");
    const downvoteButton = document.querySelector(".article-vote-down");
    const downvoteMessage = document.querySelector(".downvote-message");
    const feedbackForm = document.querySelector("#feedback-form");
    const articleMoreQuestions = document.querySelector(".article-more-questions");

    function hideFormAndResetDownvote() {
       feedbackForm.style.animation = "slideUpFadeOut 0.5s ease";
      downvoteMessage.style.animation = "slideUpFadeOut 0.5s ease";
  setTimeout(() => {
    downvoteMessage.style.display = "none";
    feedbackForm.style.display = "none";
    feedbackForm.style.animation = "";
    downvoteMessage.style.animation = "";
  }, 500);
  downvoteButton.removeAttribute("data-pressed");
  articleMoreQuestions.style.display = "block";
    }

    voteButtons.forEach((button) => {
      button.addEventListener("click", () => {
        let isDownButton = button.matches(".article-vote-down");

        if (isDownButton && !button.hasAttribute("data-pressed")) {
          downvoteMessage.style.display = "block";
          feedbackForm.style.display = "block";
          button.setAttribute("data-pressed", "true");
          articleMoreQuestions.style.display = "none"; // Hide the "article-more-questions" div
        } else {
          hideFormAndResetDownvote();
        }
      });
    });

    // Hide the form and reset the downvote button state when clicking outside
    document.addEventListener("click", (event) => {
      if (!feedbackForm.contains(event.target) && !downvoteButton.contains(event.target) && downvoteButton.hasAttribute("data-pressed")) {
        hideFormAndResetDownvote();
      }
    });
    feedbackForm.addEventListener("submit", (event) => {
      event.preventDefault();
      const feedback = event.target.elements["feedback-text"].value;
      const currentURL = window.location.href;
      const requestData = {
        "ticket": {
          "subject": "Feedback for article",
          "comment": {
            "body": feedback
          },
          "custom_fields": [
            {
              "id": "10202663276573", // replace with your custom field ID
              "value": currentURL
            }
          ],
          "tags": [
            "article_feedback"
          ]
        }
      };
      fetch(`https://${zendeskSubdomain}.zendesk.com/api/v2/tickets.json`, {
        ...fetchOptions,
        body: JSON.stringify(requestData)
      })
      .then(response => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then(data => {
        alert("Thank you for your feedback!");
        feedbackForm.style.display = "none";
      })
      .catch(error => {
        console.error("There was a problem submitting the feedback:", error);
      });
    });
  }
});