app-kit/feedback.js at main · kindel/app-kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
(function () {
  "use strict";

  // Hosts set window.KindelFeedback = { endpoint: "..." } before this file,
  // or data-endpoint on each .app-feedback-form-inner. The default is the
  // kindel.com path, a same-origin POST to /api/app-feedback.
  function endpointFor(form) {
    var attr = form.getAttribute("data-endpoint");
    if (attr) return attr;
    var cfg = window.KindelFeedback;
    if (cfg && typeof cfg.endpoint === "string" && cfg.endpoint) return cfg.endpoint;
    return "/api/app-feedback";
  }

  function initFeedback() {
    var toggles = document.querySelectorAll(".app-feedback-toggle");
    toggles.forEach(function (btn) {
      btn.addEventListener("click", function () {
        var section = btn.closest(".app-feedback-section");
        var form = section ? section.querySelector(".app-feedback-form") : null;
        if (form) {
          form.hidden = !form.hidden;
          if (!form.hidden) {
            var textarea = form.querySelector(".app-feedback-message");
            if (textarea) textarea.focus();
          }
        }
      });
    });

    var cancels = document.querySelectorAll(".app-feedback-cancel");
    cancels.forEach(function (btn) {
      btn.addEventListener("click", function () {
        var form = btn.closest(".app-feedback-form");
        if (form) {
          form.hidden = true;
          var inner = form.querySelector(".app-feedback-form-inner");
          if (inner) inner.reset();
          var status = form.querySelector(".app-feedback-status");
          if (status) status.hidden = true;
        }
      });
    });

    var forms = document.querySelectorAll(".app-feedback-form-inner");
    forms.forEach(function (form) {
      form.addEventListener("submit", function (e) {
        e.preventDefault();

        var app = form.getAttribute("data-app");
        var message = form.querySelector(".app-feedback-message").value.trim();
        var emailInput = form.querySelector(".app-feedback-email");
        var email = emailInput ? emailInput.value.trim() : "";
        var honeypotInput = form.querySelector(".app-feedback-honeypot");
        var website = honeypotInput ? honeypotInput.value.trim() : "";
        var statusEl = form.querySelector(".app-feedback-status");
        var submitBtn = form.querySelector(".app-feedback-submit");

        if (!message) {
          if (statusEl) {
            statusEl.textContent = "Please enter your feedback.";
            statusEl.hidden = false;
            statusEl.className = "app-feedback-status app-feedback-error";
          }
          return;
        }

        if (submitBtn) submitBtn.disabled = true;
        if (statusEl) {
          statusEl.textContent = "Sending...";
          statusEl.hidden = false;
          statusEl.className = "app-feedback-status";
        }

        var payload = {
          app: app,
          message: message,
          email: email,
          website: website,
          page: window.location.href
        };

        fetch(endpointFor(form), {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload)
        })
          .then(function (resp) {
            return resp.text().then(function (text) {
              var data = {};
              if (text) {
                try { data = JSON.parse(text); } catch (e) { data = {}; }
              }
              if (!resp.ok) {
                throw new Error((data && data.error) || "Could not send feedback.");
              }
              return data;
            });
          })
          .then(function () {
            if (statusEl) {
              statusEl.textContent = "Got it. Thank you.";
              statusEl.className = "app-feedback-status app-feedback-success";
              statusEl.hidden = false;
            }
            form.reset();
            setTimeout(function () {
              var wrapper = form.closest(".app-feedback-form");
              if (wrapper) wrapper.hidden = true;
              if (statusEl) statusEl.hidden = true;
            }, 2000);
          })
          .catch(function (err) {
            if (statusEl) {
              statusEl.textContent = err.message || "Something went wrong.";
              statusEl.className = "app-feedback-status app-feedback-error";
              statusEl.hidden = false;
            }
          })
          .finally(function () {
            if (submitBtn) submitBtn.disabled = false;
          });
      });
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initFeedback);
  } else {
    initFeedback();
  }
})();