website/src/lib/components/Feedback.svelte

<script lang="ts">
  import { page } from "$app/stores";

  export let date: string | undefined = undefined;
  let showFeedback = false;
  let feedbackType = "";
  let email = "";
  let comment = "";
  let error: string | undefined;
  let submitted = false;
  let submitting = false;

  async function handleSubmit() {
    submitting = true;
    error = undefined;
    const response = await fetch(
      "https://growth.appwrite.io/v1/feedback/docs",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email,
          type: feedbackType,
          route: $page.route.id,
          comment,
        }),
      },
    );
    submitting = false;
    if (response.status >= 400) {
      error =
        response.status >= 500 ? "Server Error." : "Error submitting form.";
      return;
    }
    comment = email = "";
    submitted = true;
  }

  function reset() {
    comment = email = "";
    feedbackType = "";
    submitted = false;
    error = undefined;
  }

  $: if (!showFeedback) {
    reset();
  }
</script>

<section class="web-content-footer">
  <header class="web-content-footer-header w-full">
    <div
      class="flex w-full items-center justify-between gap-8"
      style="flex-wrap: wrap-reverse;"
    >
      <div class="flex items-center gap-4">
        <h5 class="web-main-body-600 web-u-color-text-primary">
          Was this page helpful?
        </h5>
        <div class="flex gap-2">
          <button
            class="web-radio-button"
            aria-label="helpful"
            on:click={() => {
              showFeedback = feedbackType === "positive" ? false : true;
              feedbackType = "positive";
            }}
          >
            <span class="icon-thumb-up" />
          </button>
          <button
            class="web-radio-button"
            aria-label="unhelpful"
            on:click={() => {
              showFeedback = feedbackType === "negative" ? false : true;
              feedbackType = "negative";
            }}
          >
            <!-- TODO: fix the icon name on pink -->
            <span class="icon-thumb-dowm" />
          </button>
        </div>
      </div>
      <div class="web-content-footer-header-end">
        <ul class="web-metadata web-caption-400">
          {#if date}
            <li>Last updated on {new Date(date)?.toLocaleDateString()}</li>
          {/if}
          <li>
            <a
              href="https://github.com/appwrite/website"
              target="_blank"
              rel="noopener noreferrer"
              class="web-link flex items-baseline gap-1"
            >
              <span class="icon-pencil-alt contents" aria-hidden="true" />
              <span>Update on GitHub</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </header>
  {#if showFeedback}
    <form
      on:submit|preventDefault={handleSubmit}
      class="web-card is-normal"
      style="--card-padding:1rem"
    >
      <div class="flex flex-col gap-2">
        <label for="message">
          <span class="web-u-color-text-primary">
            What did you {feedbackType === "negative" ? "dislike" : "like"}?
            (optional)
          </span>
        </label>
        <textarea
          class="web-input-text"
          id="message"
          placeholder="Write your message"
          bind:value={comment}
        />
        <label for="message" class="mt-2">
          <span class="web-u-color-text-primary">Email</span>
        </label>
        <input
          class="web-input-text"
          placeholder="Enter your email"
          type="email"
          name="email"
          required
          bind:value={email}
        />
      </div>
      {#if submitted}
        <p class="web-u-color-text-primary mt-4">
          Your message has been sent successfully. We appreciate your feedback.
        </p>
      {/if}
      {#if error}
        <p class="web-u-color-text-primary mt-4">
          There was an error submitting your feedback. Please try again later.
        </p>
      {/if}

      <div class="mt-4 flex justify-end gap-2">
        <button
          class="web-button is-text"
          on:click={() => (showFeedback = false)}
        >
          <span>Cancel</span>
        </button>
        <button
          type="submit"
          class="web-button"
          disabled={submitting || !email}
        >
          <span>Submit</span>
        </button>
      </div>
    </form>
  {/if}
</section>