From 45605100697e6f0b9a3df63a357661261e546c9d Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Tue, 12 Sep 2023 12:16:13 +0100
Subject: [PATCH] Customize signup flow BB changes (#11706)

* wip

* wip

* wip

* wip
---
 packages/bbui/src/Banner/Banner.svelte        |  4 +++
 .../bbui/src/Notification/Notification.svelte |  6 ++++-
 .../Notification/NotificationDisplay.svelte   |  3 ++-
 packages/bbui/src/Stores/banner.js            |  1 +
 packages/bbui/src/Stores/notifications.js     |  6 ++++-
 .../builder/src/pages/builder/_layout.svelte  | 27 +++++++++++++++++++
 6 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Banner/Banner.svelte b/packages/bbui/src/Banner/Banner.svelte
index 3810021a61..a04d469cc7 100644
--- a/packages/bbui/src/Banner/Banner.svelte
+++ b/packages/bbui/src/Banner/Banner.svelte
@@ -66,6 +66,10 @@
     pointer-events: all;
     width: 100%;
   }
+
+  .spectrum-Toast--neutral {
+    background-color: var(--grey-2);
+  }
   .spectrum-Button {
     border: 1px solid rgba(255, 255, 255, 0.2);
   }
diff --git a/packages/bbui/src/Notification/Notification.svelte b/packages/bbui/src/Notification/Notification.svelte
index eb2922a5de..26e60ed366 100644
--- a/packages/bbui/src/Notification/Notification.svelte
+++ b/packages/bbui/src/Notification/Notification.svelte
@@ -27,7 +27,11 @@
   <div class="spectrum-Toast-body" class:actionBody={!!action}>
     <div class="wrap spectrum-Toast-content">{message || ""}</div>
     {#if action}
-      <ActionButton quiet emphasized on:click={action}>
+      <ActionButton
+        quiet
+        emphasized
+        on:click={() => action(() => dispatch("dismiss"))}
+      >
         <div style="color: white; font-weight: 600;">{actionMessage}</div>
       </ActionButton>
     {/if}
diff --git a/packages/bbui/src/Notification/NotificationDisplay.svelte b/packages/bbui/src/Notification/NotificationDisplay.svelte
index 0f7e93eb23..6b7e68cece 100644
--- a/packages/bbui/src/Notification/NotificationDisplay.svelte
+++ b/packages/bbui/src/Notification/NotificationDisplay.svelte
@@ -8,7 +8,7 @@
 
 <Portal target=".modal-container">
   <div class="notifications">
-    {#each $notifications as { type, icon, message, id, dismissable, action, wide } (id)}
+    {#each $notifications as { type, icon, message, id, dismissable, action, actionMessage, wide } (id)}
       <div transition:fly={{ y: 30 }}>
         <Notification
           {type}
@@ -16,6 +16,7 @@
           {message}
           {dismissable}
           {action}
+          {actionMessage}
           {wide}
           on:dismiss={() => notifications.dismiss(id)}
         />
diff --git a/packages/bbui/src/Stores/banner.js b/packages/bbui/src/Stores/banner.js
index 1a0b2d9ecc..fc93e7be99 100644
--- a/packages/bbui/src/Stores/banner.js
+++ b/packages/bbui/src/Stores/banner.js
@@ -1,6 +1,7 @@
 import { writable } from "svelte/store"
 
 export const BANNER_TYPES = {
+  NEUTRAL: "neutral",
   INFO: "info",
   NEGATIVE: "negative",
   WARNING: "warning",
diff --git a/packages/bbui/src/Stores/notifications.js b/packages/bbui/src/Stores/notifications.js
index 449d282f24..28331fffd8 100644
--- a/packages/bbui/src/Stores/notifications.js
+++ b/packages/bbui/src/Stores/notifications.js
@@ -27,7 +27,9 @@ export const createNotificationStore = () => {
       icon = "",
       autoDismiss = true,
       action = null,
+      actionMessage = null,
       wide = false,
+      dismissTimeout = NOTIFICATION_TIMEOUT,
     }
   ) => {
     if (block) {
@@ -44,14 +46,16 @@ export const createNotificationStore = () => {
           icon,
           dismissable: !autoDismiss,
           action,
+          actionMessage,
           wide,
+          dismissTimeout,
         },
       ]
     })
     if (autoDismiss) {
       const timeoutId = setTimeout(() => {
         dismissNotification(_id)
-      }, NOTIFICATION_TIMEOUT)
+      }, dismissTimeout)
       timeoutIds.add(timeoutId)
     }
   }
diff --git a/packages/builder/src/pages/builder/_layout.svelte b/packages/builder/src/pages/builder/_layout.svelte
index b216958045..960822a39f 100644
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@@ -3,6 +3,7 @@
   import { admin, auth, licensing } from "stores/portal"
   import { onMount } from "svelte"
   import { CookieUtils, Constants } from "@budibase/frontend-core"
+  import { banner, BANNER_TYPES } from "@budibase/bbui"
   import { API } from "api"
   import Branding from "./Branding.svelte"
 
@@ -16,6 +17,32 @@
   $: user = $auth.user
 
   $: useAccountPortal = cloud && !$admin.disableAccountPortal
+  let showVerificationPrompt = false
+
+  const checkVerification = user => {
+    if (!showVerificationPrompt && user?.account?.verified === false) {
+      showVerificationPrompt = true
+      banner.queue([
+        {
+          message: `Please verify your account. We've sent the verification link to ${user.email}`,
+          type: BANNER_TYPES.NEUTRAL,
+          showCloseButton: false,
+          extraButtonAction: () => {
+            fetch(`${$admin.accountPortalUrl}/api/auth/reset`, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({ email: user.email }),
+            })
+          },
+          extraButtonText: "Resend email",
+        },
+      ])
+    }
+  }
+
+  $: checkVerification(user)
 
   const validateTenantId = async () => {
     const host = window.location.host