Adds last bits to NPS feedback form

packages/builder/src/components/deploy/DeployModal.svelte

@@ -1,9 +1,6 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import { Button, Modal, notifications, ModalContent } from "@budibase/bbui"
-  import FeedbackIframe from "../feedback/FeedbackIframe.svelte"
-  import Feedback from "./Feedback.svelte"
-  import { store } from "builderStore"
   import api from "builderStore/api"
   import analytics from "analytics"
 
@@ -20,8 +17,6 @@
   let poll
   let publishModal
 
-  $: appId = $store.appId
-
   async function deployApp() {
     try {
       const response = await api.post("/api/deploy")
@@ -93,8 +88,6 @@
   onDestroy(() => clearInterval(poll))
 </script>
 
-<Feedback />
-
 <Button secondary on:click={publishModal.show}>Publish</Button>
 <Modal bind:this={feedbackModal}>
   <ModalContent
@@ -102,9 +95,7 @@
     size="L"
     showConfirmButton={false}
     showCancelButton={false}
-  >
-    <FeedbackIframe on:finished={feedbackModal.hide} />
-  </ModalContent>
+  />
 </Modal>
 <Modal bind:this={publishModal}>
   <ModalContent

packages/builder/src/components/feedback/NPSFeedbackForm.svelte

@@ -1,4 +1,7 @@
 <script>
+  import analytics from "analytics"
+  import { createEventDispatcher } from "svelte"
+  import { fly } from "svelte/transition"
   import {
     ActionButton,
     RadioGroup,
@@ -21,6 +24,8 @@
     "Documentation",
   ]
 
+  const dispatch = createEventDispatcher()
+
   // Data to send off
   let rating
   let improvements
@@ -31,20 +36,23 @@
     step = 1
   }
 
-  function submitFeedback() {
+  function submitFeedback(ev) {
     // 1. Submit feedback
     // 2. dispatch event to parent and publish event
     // 3. Store cookie, flip user flag
-    console.log({
+
+    analytics.submitFeedback({
       rating,
       improvements,
       comment,
     })
+
+    dispatch("submitted")
   }
 </script>
 
-<div class="overlay">
-  <div class="feedback-frame">
+<div class="position">
+  <div class="feedback-frame" transition:fly>
     <Layout gap="XS">
       {#if step === 0}
         <Heading size="XS"
@@ -103,7 +111,7 @@
 </div>
 
 <style>
-  .overlay {
+  .position {
     position: absolute;
     right: var(--spacing-l);
     bottom: calc(5 * var(--spacing-xl));

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -5,6 +5,7 @@
   import DeployModal from "components/deploy/DeployModal.svelte"
   import RevertModal from "components/deploy/RevertModal.svelte"
   import VersionModal from "components/deploy/VersionModal.svelte"
+  import NPSFeedbackForm from "components/feedback/NPSFeedbackForm.svelte"
   import { get } from "builderStore/api"
   import { isActive, goto, layout } from "@roxi/routify"
   import Logo from "assets/bb-emblem.svg"
@@ -18,6 +19,27 @@
     $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
   )
 
+  let userShouldPostFeedback = false
+
+  function checkIfUserHasSubmittedFeedback() {
+    return document.cookie
+      ?.split("; ")
+      ?.find(row => row.startsWith("feedbackSubmitted="))
+      ?.split("=")[1]
+  }
+
+  function previewApp() {
+    if (!checkIfUserHasSubmittedFeedback() === true) {
+      userShouldPostFeedback = true
+    }
+    window.open(`/${application}`)
+  }
+
+  function feedbackSubmitted() {
+    userShouldPostFeedback = false
+    document.cookie = "feedbackSubmitted=true"
+  }
+
   async function getPackage() {
     const res = await get(`/api/applications/${application}/appPackage`)
     const pkg = await res.json()
@@ -83,13 +105,7 @@
       <div class="toprightnav">
         <VersionModal />
         <RevertModal />
-        <Icon
-          name="Play"
-          hoverable
-          on:click={() => {
-            window.open(`/${application}`)
-          }}
-        />
+        <Icon name="Play" hoverable on:click={previewApp} />
         <DeployModal />
       </div>
     </div>
@@ -99,6 +115,10 @@
   <p>Something went wrong: {error.message}</p>
 {/await}
 
+{#if userShouldPostFeedback}
+  <NPSFeedbackForm on:submitted={feedbackSubmitted} />
+{/if}
+
 <style>
   .loading {
     min-height: 100%;