Merge pull request #15119 from Budibase/automation-survey

Add automation survey popup

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,13 @@
     automationStore,
     selectedAutomation,
   } from "stores/builder"
+  import { createLocalStorageStore } from "@budibase/frontend-core"
+  import { fly } from "svelte/transition"
 
   $: 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",
@@ -29,9 +31,11 @@
 
   let modal
   let webhookModal
+  let mounted = false
 
   onMount(() => {
     $automationStore.showTestPanel = false
+    mounted = true
   })
 
   onDestroy(stopSyncing)
@@ -79,6 +83,43 @@
   </Modal>
 </div>
 
+{#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">
+        <a
+          href="https://t.maze.co/310149185"
+          target="_blank"
+          rel="noopener noreferrer"
+          on:click={() => surveyDismissed.set(true)}
+        >
+          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 +149,9 @@
     justify-content: center;
     align-items: center;
   }
-
   .main {
     width: 300px;
   }
-
   .setup {
     padding-top: 9px;
     border-left: var(--border-light);
@@ -125,4 +164,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>