adjust form completed step

app/javascript/submission_form/completed.vue

@@ -1,30 +1,60 @@
 <template>
-  <div>
-    <p>
-      Form completed - thanks!
+  <div class="mx-auto max-w-md flex flex-col">
+    <p class="font-medium text-2xl flex items-center space-x-1.5 mx-auto">
+      <IconCircleCheck
+        class="inline text-green-600"
+        :width="30"
+        :height="30"
+      />
+      <span>
+        Form has been completed!
+      </span>
     </p>
-    <button @click.prevent="sendCopyToEmail">
-      <span v-if="isSendingCopy">
-        Sending
-      </span>
-      <span>
-        Send copy to email
-      </span>
-    </button>
-    <button @click.prevent="download">
-      <span v-if="isDownloading">
-        Downloading
-      </span>
-      <span>
-        Download copy
-      </span>
-    </button>
+    <div class="space-y-3 mt-5">
+      <button
+        class="white-button flex items-center space-x-1 w-full"
+        :disabled="isSendingCopy"
+        @click.prevent="sendCopyToEmail"
+      >
+        <IconInnerShadowTop
+          v-if="isSendingCopy"
+          class="animate-spin"
+        />
+        <IconMail v-else />
+        <span>
+          Send copy via email
+        </span>
+      </button>
+      <button
+        class="base-button flex items-center space-x-1 w-full"
+        :disabled="isDownloading"
+        @click.prevent="download"
+      >
+        <IconInnerShadowTop
+          v-if="isDownloading"
+          class="animate-spin"
+        />
+        <IconDownload v-else />
+        <span>
+          Download
+        </span>
+      </button>
+    </div>
   </div>
 </template>
 
 <script>
+import { IconCircleCheck, IconMail, IconDownload, IconInnerShadowTop } from '@tabler/icons-vue'
+import confetti from 'canvas-confetti'
+
 export default {
   name: 'FormCompleted',
+  components: {
+    IconCircleCheck,
+    IconInnerShadowTop,
+    IconMail,
+    IconDownload
+  },
   props: {
     submitterSlug: {
       type: String,
@@ -37,12 +67,21 @@ export default {
       isDownloading: false
     }
   },
+  mounted () {
+    confetti({
+      particleCount: 50,
+      startVelocity: 30,
+      spread: 140
+    })
+  },
   methods: {
     sendCopyToEmail () {
       this.isSendingCopy = true
 
       fetch(`/send_submission_email.json?submitter_slug=${this.submitterSlug}`, {
         method: 'POST'
+      }).then(() => {
+        alert('Email has been sent')
       }).finally(() => {
         this.isSendingCopy = false
       })
@@ -50,17 +89,21 @@ export default {
     download () {
       this.isDownloading = true
 
-      fetch(`/submitters/${this.submitterSlug}/download`).then(async (response) => {
-        const blob = new Blob([await response.text()], { type: `${response.headers.get('content-type')};charset=utf-8;` })
-        const url = URL.createObjectURL(blob)
-        const link = document.createElement('a')
+      fetch(`/submitters/${this.submitterSlug}/download`).then((response) => response.json()).then((urls) => {
+        urls.forEach((url) => {
+          fetch(url).then(async (response) => {
+            const blob = new Blob([await response.text()], { type: `${response.headers.get('content-type')};charset=utf-8;` })
+            const url = URL.createObjectURL(blob)
+            const link = document.createElement('a')
 
-        link.href = url
-        link.setAttribute('download', response.headers.get('content-disposition').split('"')[1])
+            link.href = url
+            link.setAttribute('download', response.headers.get('content-disposition').split('"')[1])
 
-        link.click()
+            link.click()
 
-        URL.revokeObjectURL(url)
+            URL.revokeObjectURL(url)
+          })
+        })
       }).finally(() => {
         this.isDownloading = false
       })