From bc8cd6723d0757defa0982d67434e0e7c5f8916e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 4 Dec 2024 15:54:07 +0000
Subject: [PATCH 1/3] Add automation survey popup

---
 .../[application]/automation/_layout.svelte   | 74 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index acc1b8e2d9..cc2746306c 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Heading, Body, Layout, Button, Modal } from "@budibase/bbui"
+  import { Heading, Body, Layout, Button, Modal, Icon } from "@budibase/bbui"
   import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
   import CreateAutomationModal from "components/automation/AutomationPanel/CreateAutomationModal.svelte"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
@@ -12,11 +12,12 @@
     automationStore,
     selectedAutomation,
   } from "stores/builder"
+  import { createLocalStorageStore } from "@budibase/frontend-core"
 
   $: automationId = $selectedAutomation?.data?._id
   $: builderStore.selectResource(automationId)
 
-  // Keep URL and state in sync for selected screen ID
+  const surveyDismissed = createLocalStorageStore("automation-survey", false)
   const stopSyncing = syncURLToState({
     urlParam: "automationId",
     stateKey: "selectedAutomationId",
@@ -79,6 +80,38 @@
   </Modal>
 </div>
 
+{#if !$surveyDismissed}
+  <div class="survey">
+    <div class="survey__body">
+      <div class="survey__title">We value your feedback!</div>
+      <div class="survey__text">
+        <a
+          href="https://t.maze.co/310149185"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Complete our survey on Automations</a
+        >
+        and receive a $20 thank-you gift.
+        <a
+          href="https://drive.google.com/file/d/12-qk_2F9g5PdbM6wuKoz2KkIyLI-feMX/view?usp=sharing"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Terms apply.
+        </a>
+      </div>
+    </div>
+    <Icon
+      name="Close"
+      hoverable
+      color="var(--spectrum-global-color-static-gray-300)"
+      hoverColor="var(--spectrum-global-color-static-gray-100)"
+      on:click={() => surveyDismissed.set(true)}
+    />
+  </div>
+{/if}
+
 <style>
   .root {
     flex: 1 1 auto;
@@ -108,11 +141,9 @@
     justify-content: center;
     align-items: center;
   }
-
   .main {
     width: 300px;
   }
-
   .setup {
     padding-top: 9px;
     border-left: var(--border-light);
@@ -125,4 +156,39 @@
     grid-column: 3;
     overflow: auto;
   }
+
+  /* Survey */
+  .survey {
+    position: absolute;
+    bottom: 32px;
+    right: 32px;
+    background: var(--spectrum-semantic-positive-color-background);
+    display: flex;
+    flex-direction: row;
+    padding: var(--spacing-l) var(--spacing-xl);
+    border-radius: 4px;
+    gap: var(--spacing-xl);
+  }
+  .survey * {
+    color: var(--spectrum-global-color-static-gray-300);
+    white-space: nowrap;
+  }
+  .survey a {
+    text-decoration: underline;
+    transition: color 130ms ease-out;
+  }
+  .survey a:hover {
+    color: var(--spectrum-global-color-static-gray-100);
+    cursor: pointer;
+  }
+  .survey__body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .survey__title {
+    font-weight: 600;
+    font-size: 15px;
+  }
 </style>

From 4c8f86941b8e76ed420216102532c194b2894594 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 4 Dec 2024 16:01:04 +0000
Subject: [PATCH 2/3] Close automation survey popup when clicking on the link

---
 .../pages/builder/app/[application]/automation/_layout.svelte    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index cc2746306c..345bc9e9e4 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -89,6 +89,7 @@
           href="https://t.maze.co/310149185"
           target="_blank"
           rel="noopener noreferrer"
+          on:click={() => surveyDismissed.set(true)}
         >
           Complete our survey on Automations</a
         >

From 5ea8aab88e5d26e8f32535821b2cf2d5c6f06b6f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 5 Dec 2024 09:30:42 +0000
Subject: [PATCH 3/3] Add transition to automation survey

---
 .../app/[application]/automation/_layout.svelte       | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index 345bc9e9e4..c5c28d1e1e 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -13,6 +13,7 @@
     selectedAutomation,
   } from "stores/builder"
   import { createLocalStorageStore } from "@budibase/frontend-core"
+  import { fly } from "svelte/transition"
 
   $: automationId = $selectedAutomation?.data?._id
   $: builderStore.selectResource(automationId)
@@ -30,9 +31,11 @@
 
   let modal
   let webhookModal
+  let mounted = false
 
   onMount(() => {
     $automationStore.showTestPanel = false
+    mounted = true
   })
 
   onDestroy(stopSyncing)
@@ -80,8 +83,12 @@
   </Modal>
 </div>
 
-{#if !$surveyDismissed}
-  <div class="survey">
+{#if !$surveyDismissed && mounted}
+  <div
+    class="survey"
+    in:fly={{ x: 600, duration: 260, delay: 1000 }}
+    out:fly={{ x: 600, duration: 260 }}
+  >
     <div class="survey__body">
       <div class="survey__title">We value your feedback!</div>
       <div class="survey__text">