Merge 47cc910 into 021039d

src/liff/pages/NegativeFeedback.svelte

@@ -1,9 +1,54 @@
 <script>
+  import { onMount } from 'svelte';
   import { t } from 'ttag';
+  import Button, { Label } from '@smui/button';
+  import Textfield, { Input, Textarea } from '@smui/textfield';
+  import { DOWNVOTE_PREFIX } from 'src/lib/sharedUtils';
+  import { gql } from '../lib';
+
+  let processing = false;
+  let comment = '';
+
+  // Submitting feedback without comment first
+  onMount(() => gql`
+    mutation VoteDown {
+      voteReply(vote: DOWNVOTE)
+    }
+  `());
+
+  const handleSubmit = async () => {
+    processing = true;
+
+    await liff.sendMessages([
+      {
+        type: 'text', text: `${DOWNVOTE_PREFIX}${comment}`,
+      }
+    ]);
+
+    processing = false;
+    liff.closeWindow();
+  }
 </script>
 
 <svelte:head>
-  <title>{t`Comment on the not-useful reply`}</title>
+  <title>{t`Report not useful`}</title>
 </svelte:head>
 
-<p>Negative Feedback</p>
+<p>{t`We are sorry that the reply is not useful to you.`}</p>
+
+<Textfield
+  fullwidth
+  textarea
+  bind:value={comment}
+  label={t`How can we make it useful to you?`}
+  input$rows={8}
+/>
+
+<Button
+  style="display: block; width: 100%; margin: 8px 0;"
+  variant="raised"
+  on:click={handleSubmit}
+  disabled={processing}
+>
+  <Label>{t`Submit`}</Label>
+</Button>

src/liff/pages/PositiveFeedback.svelte

@@ -1,9 +1,54 @@
 <script>
+  import { onMount } from 'svelte';
   import { t } from 'ttag';
+  import Button, { Label } from '@smui/button';
+  import Textfield, { Input, Textarea } from '@smui/textfield';
+  import { UPVOTE_PREFIX } from 'src/lib/sharedUtils';
+  import { gql } from '../lib';
+
+  let processing = false;
+  let comment = '';
+
+  // Submitting feedback without comment first
+  onMount(() => gql`
+    mutation VoteUp {
+      voteReply(vote: UPVOTE)
+    }
+  `());
+
+  const handleSubmit = async () => {
+    processing = true;
+
+    await liff.sendMessages([
+      {
+        type: 'text', text: `${UPVOTE_PREFIX}${comment}`,
+      }
+    ]);
+
+    processing = false;
+    liff.closeWindow();
+  }
 </script>
 
 <svelte:head>
-  <title>{t`Comment on the useful reply`}</title>
+  <title>{t`Report reply useful`}</title>
 </svelte:head>
 
-<p>Positive feedback</p>
+<p>{t`It's glad to see the reply is helpful.`}</p>
+
+<Textfield
+  fullwidth
+  textarea
+  bind:value={comment}
+  label={t`Do you have anything to add to the reply?`}
+  input$rows={8}
+/>
+
+<Button
+  style="display: block; width: 100%; margin: 8px 0;"
+  variant="raised"
+  on:click={handleSubmit}
+  disabled={processing}
+>
+  <Label>{t`Submit`}</Label>
+</Button>