From 3a5557a4377d8678839578c8a40248d5c656c609 Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Fri, 23 Sep 2022 11:40:19 +0100
Subject: [PATCH] Update group upgrade UX

---
 .../portal/licensing/LicensingOverlays.svelte |  2 +-
 .../portal/licensing/licensingBanners.js      |  2 +-
 .../pages/builder/portal/apps/create.svelte   |  4 +-
 .../pages/builder/portal/apps/index.svelte    |  7 +--
 .../builder/portal/manage/groups/index.svelte | 36 ++++++-----
 .../portal/manage/users/[userId].svelte       |  4 +-
 .../users/_components/AddUserModal.svelte     |  4 +-
 .../_components/DeletionFailureModal.svelte   |  1 -
 .../users/_components/ImportUsersModal.svelte |  4 +-
 .../builder/portal/manage/users/index.svelte  |  4 +-
 .../overview/_components/AccessTab.svelte     |  4 +-
 .../_components/AssignmentModal.svelte        |  4 +-
 .../builder/portal/settings/usage.svelte      |  3 +-
 packages/builder/src/stores/portal/auth.js    | 11 +---
 packages/builder/src/stores/portal/groups.js  |  7 +--
 .../builder/src/stores/portal/licensing.js    | 61 ++++++++++++++++---
 16 files changed, 99 insertions(+), 59 deletions(-)

diff --git a/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte b/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte
index 736aac862f..bcafd92a85 100644
--- a/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte
+++ b/packages/builder/src/components/portal/licensing/LicensingOverlays.svelte
@@ -43,7 +43,7 @@
       {
         key: ExpiringKeys.LICENSING_PAYMENT_FAILED,
         criteria: () => {
-          return $licensing.accountPastDue && !$licensing.isFreePlan()
+          return $licensing.accountPastDue && !$licensing.isFreePlan
         },
         action: () => {
           paymentFailedModal.show()
diff --git a/packages/builder/src/components/portal/licensing/licensingBanners.js b/packages/builder/src/components/portal/licensing/licensingBanners.js
index 37d8e4a540..d93305cbf6 100644
--- a/packages/builder/src/components/portal/licensing/licensingBanners.js
+++ b/packages/builder/src/components/portal/licensing/licensingBanners.js
@@ -113,7 +113,7 @@ const buildPaymentFailedBanner = () => {
     key: "payment_Failed",
     type: BANNER_TYPES.NEGATIVE,
     criteria: () => {
-      return get(licensing)?.accountPastDue && !get(licensing).isFreePlan()
+      return get(licensing)?.accountPastDue && !get(licensing).isFreePlan
     },
     message: `Payment Failed - Please update your billing details or your account will be downgrades in 
     ${get(licensing)?.pastDueDaysRemaining} day${
diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte
index e3dc6a267c..2dda17875b 100644
--- a/packages/builder/src/pages/builder/portal/apps/create.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/create.svelte
@@ -31,8 +31,8 @@
   onMount(async () => {
     try {
       await templates.load()
-      await licensing.getQuotaUsage()
-      await licensing.getUsageMetrics()
+      // always load latest
+      await licensing.init()
       if ($templates?.length === 0) {
         notifications.error(
           "There was a problem loading quick start templates."
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index 019ec67cd7..e4cacada81 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -229,9 +229,8 @@
     try {
       await apps.load()
       await templates.load()
-
-      await licensing.getQuotaUsage()
-      await licensing.getUsageMetrics()
+      // always load latest
+      await licensing.init()
 
       if ($templates?.length === 0) {
         notifications.error(
@@ -361,7 +360,7 @@
                   </Button>
                 {/if}
                 <div class="filter">
-                  {#if $auth.groupsEnabled}
+                  {#if $licensing.groupsEnabled}
                     <AccessFilter on:change={accessFilterAction} />
                   {/if}
                   <Select
diff --git a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
index bb8f18ff13..f3b5cbee00 100644
--- a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
@@ -9,7 +9,7 @@
     Tags,
     notifications,
   } from "@budibase/bbui"
-  import { groups, auth } from "stores/portal"
+  import { groups, auth, licensing } from "stores/portal"
   import { onMount } from "svelte"
   import CreateEditGroupModal from "./_components/CreateEditGroupModal.svelte"
   import UserGroupsRow from "./_components/UserGroupsRow.svelte"
@@ -53,7 +53,7 @@
 
   onMount(async () => {
     try {
-      if ($auth.groupsEnabled) {
+      if ($licensing.groupsEnabled) {
         await groups.actions.init()
       }
     } catch (error) {
@@ -66,7 +66,7 @@
   <Layout gap="XS" noPadding>
     <div style="display: flex;">
       <Heading size="M">User groups</Heading>
-      {#if !$auth.groupsEnabled}
+      {#if !$licensing.groupsEnabled}
         <Tags>
           <div class="tags">
             <div class="tag">
@@ -77,19 +77,25 @@
       {/if}
     </div>
     <Body>Easily assign and manage your users access with User Groups</Body>
+    {#if !$auth.accountPortalAccess}
+      <Body>Contact your account holder to upgrade</Body>
+    {/if}
   </Layout>
   <div class="align-buttons">
-    <Button
-      newStyles
-      icon={$auth.groupsEnabled ? "UserGroup" : ""}
-      cta={$auth.groupsEnabled}
-      on:click={$auth.groupsEnabled
-        ? showCreateGroupModal
-        : window.open("https://budibase.com/pricing/", "_blank")}
-    >
-      {$auth.groupsEnabled ? "Create user group" : "Upgrade Account"}
-    </Button>
-    {#if !$auth.groupsEnabled}
+    {#if $licensing.groupsEnabled}
+      <!--Show the group create button-->
+      <Button newStyles icon={"UserGroup"} cta on:click={showCreateGroupModal}>
+        Create user group
+      </Button>
+    {:else}
+      <Button
+        newStyles
+        disabled={!$auth.accountPortalAccess}
+        on:click={$licensing.goToUpgradePage()}
+      >
+        Upgrade
+      </Button>
+      <!--Show the view plans button-->
       <Button
         newStyles
         secondary
@@ -100,7 +106,7 @@
     {/if}
   </div>
 
-  {#if $auth.groupsEnabled && $groups.length}
+  {#if $licensing.groupsEnabled && $groups.length}
     <div class="groupTable">
       {#each $groups as group}
         <div>
diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
index 8f7b24f1b6..f161e1c96c 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@@ -23,7 +23,7 @@
   } from "@budibase/bbui"
   import { onMount } from "svelte"
   import { fetchData } from "helpers"
-  import { users, auth, groups, apps } from "stores/portal"
+  import { users, auth, groups, apps, licensing } from "stores/portal"
   import { roles } from "stores/backend"
   import { Constants } from "@budibase/frontend-core"
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
@@ -284,7 +284,7 @@
       </Layout>
     </Layout>
 
-    {#if $auth.groupsEnabled}
+    {#if $licensing.groupsEnabled}
       <!-- User groups -->
       <Layout gap="S" noPadding>
         <div class="tableTitle">
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
index e76271854d..684743facd 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
@@ -8,7 +8,7 @@
     Layout,
     Icon,
   } from "@budibase/bbui"
-  import { groups, auth } from "stores/portal"
+  import { groups, licensing } from "stores/portal"
   import { Constants } from "@budibase/frontend-core"
   import { emailValidator } from "helpers/validation"
 
@@ -117,7 +117,7 @@
     </div>
   </Layout>
 
-  {#if $auth.groupsEnabled}
+  {#if $licensing.groupsEnabled}
     <Multiselect
       bind:value={userGroups}
       placeholder="No groups"
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte
index 370ee153f2..876be991d9 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/DeletionFailureModal.svelte
@@ -2,7 +2,6 @@
   import { Body, ModalContent, Table } from "@budibase/bbui"
   import { onMount } from "svelte"
 
-  export let userData
   export let deleteUsersResponse
 
   let successCount
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte
index d6ea4275c9..0d529e9e20 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte
@@ -6,7 +6,7 @@
     Multiselect,
     notifications,
   } from "@budibase/bbui"
-  import { groups, auth, admin } from "stores/portal"
+  import { groups, licensing, admin } from "stores/portal"
   import { emailValidator } from "helpers/validation"
   import { Constants } from "@budibase/frontend-core"
 
@@ -92,7 +92,7 @@
     options={Constants.BuilderRoleDescriptions}
   />
 
-  {#if $auth.groupsEnabled}
+  {#if $licensing.groupsEnabled}
     <Multiselect
       bind:value={userGroups}
       placeholder="No groups"
diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
index ea61e3fcf3..f841db2cbe 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@@ -13,7 +13,7 @@
     Divider,
   } from "@budibase/bbui"
   import AddUserModal from "./_components/AddUserModal.svelte"
-  import { users, groups, auth } from "stores/portal"
+  import { users, groups, auth, licensing } from "stores/portal"
   import { onMount } from "svelte"
   import DeleteRowsButton from "components/backend/DataTable/buttons/DeleteRowsButton.svelte"
   import GroupsTableRenderer from "./_components/GroupsTableRenderer.svelte"
@@ -51,7 +51,7 @@
     role: {
       sortable: false,
     },
-    ...($auth.groupsEnabled && {
+    ...($licensing.groupsEnabled && {
       userGroups: { sortable: false, displayName: "Groups" },
     }),
     apps: {},
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
index 5e327a8743..3b17bbc8fa 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/AccessTab.svelte
@@ -14,7 +14,7 @@
   import { onMount } from "svelte"
 
   import RoleSelect from "components/common/RoleSelect.svelte"
-  import { users, groups, apps, auth } from "stores/portal"
+  import { users, groups, apps, licensing } from "stores/portal"
   import AssignmentModal from "./AssignmentModal.svelte"
   import { createPaginationStore } from "helpers/pagination"
   import { roles } from "stores/backend"
@@ -156,7 +156,7 @@
           >
         </div>
       </div>
-      {#if $auth.groupsEnabled && appGroups.length}
+      {#if $licensing.groupsEnabled && appGroups.length}
         <List title="User Groups">
           {#each appGroups as group}
             <ListItem
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
index e3b2245679..d4916f5755 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte
@@ -8,7 +8,7 @@
     notifications,
   } from "@budibase/bbui"
   import { roles } from "stores/backend"
-  import { groups, users, auth } from "stores/portal"
+  import { groups, users, licensing } from "stores/portal"
   import { RoleUtils } from "@budibase/frontend-core"
   import { createPaginationStore } from "helpers/pagination"
 
@@ -32,7 +32,7 @@
   $: valid =
     appData?.length && !appData?.some(x => !x.id?.length || !x.role?.length)
   $: optionSections = {
-    ...($auth.groupsEnabled &&
+    ...($licensing.groupsEnabled &&
       filteredGroups.length && {
         ["User groups"]: {
           data: filteredGroups,
diff --git a/packages/builder/src/pages/builder/portal/settings/usage.svelte b/packages/builder/src/pages/builder/portal/settings/usage.svelte
index f2809452fd..e5f751c55c 100644
--- a/packages/builder/src/pages/builder/portal/settings/usage.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/usage.svelte
@@ -147,7 +147,8 @@
 
   const init = async () => {
     try {
-      await licensing.getQuotaUsage()
+      // always load latest
+      await licensing.init()
     } catch (e) {
       console.error(e)
       notifications.error(e)
diff --git a/packages/builder/src/stores/portal/auth.js b/packages/builder/src/stores/portal/auth.js
index 8ac19ab785..31b4533738 100644
--- a/packages/builder/src/stores/portal/auth.js
+++ b/packages/builder/src/stores/portal/auth.js
@@ -2,23 +2,20 @@ import { derived, writable, get } from "svelte/store"
 import { API } from "api"
 import { admin } from "stores/portal"
 import analytics from "analytics"
-import { FEATURE_FLAGS } from "helpers/featureFlags"
-import { Constants } from "@budibase/frontend-core"
 
 export function createAuthStore() {
   const auth = writable({
     user: null,
+    accountPortalAccess: false,
     tenantId: "default",
     tenantSet: false,
     loaded: false,
     postLogout: false,
-    groupsEnabled: false,
   })
   const store = derived(auth, $store => {
     let initials = null
     let isAdmin = false
     let isBuilder = false
-    let groupsEnabled = false
     if ($store.user) {
       const user = $store.user
       if (user.firstName) {
@@ -33,12 +30,10 @@ export function createAuthStore() {
       }
       isAdmin = !!user.admin?.global
       isBuilder = !!user.builder?.global
-      groupsEnabled =
-        user?.license.features.includes(Constants.Features.USER_GROUPS) &&
-        user?.featureFlags.includes(FEATURE_FLAGS.USER_GROUPS)
     }
     return {
       user: $store.user,
+      accountPortalAccess: $store.accountPortalAccess,
       tenantId: $store.tenantId,
       tenantSet: $store.tenantSet,
       loaded: $store.loaded,
@@ -46,7 +41,6 @@ export function createAuthStore() {
       initials,
       isAdmin,
       isBuilder,
-      groupsEnabled,
     }
   })
 
@@ -54,6 +48,7 @@ export function createAuthStore() {
     auth.update(store => {
       store.loaded = true
       store.user = user
+      store.accountPortalAccess = user?.accountPortalAccess
       if (user) {
         store.tenantId = user.tenantId || "default"
         store.tenantSet = true
diff --git a/packages/builder/src/stores/portal/groups.js b/packages/builder/src/stores/portal/groups.js
index ca814ac057..eaf92ffa90 100644
--- a/packages/builder/src/stores/portal/groups.js
+++ b/packages/builder/src/stores/portal/groups.js
@@ -1,7 +1,6 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
-import { auth } from "stores/portal"
-import { Constants } from "@budibase/frontend-core"
+import { licensing } from "stores/portal"
 
 export function createGroupsStore() {
   const store = writable([])
@@ -10,9 +9,7 @@ export function createGroupsStore() {
     init: async () => {
       // only init if these is a groups license, just to be sure but the feature will be blocked
       // on the backend anyway
-      if (
-        get(auth).user.license.features.includes(Constants.Features.USER_GROUPS)
-      ) {
+      if (get(licensing).groupsEnabled) {
         const users = await API.getGroups()
         store.set(users)
       }
diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js
index e2b4570302..135c0d6ef4 100644
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@@ -1,14 +1,31 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
-import { auth } from "stores/portal"
+import { auth, admin } from "stores/portal"
 import { Constants } from "@budibase/frontend-core"
 import { StripeStatus } from "components/portal/licensing/constants"
 import { FEATURE_FLAGS, isEnabled } from "../../helpers/featureFlags"
 
 export const createLicensingStore = () => {
   const DEFAULT = {
-    plans: {},
+    // navigation
+    goToUpgradePage: () => {},
+    // the top level license
+    license: undefined,
+    isFreePlan: true,
+    // features
+    groupsEnabled: false,
+    // the currently used quotas from the db
+    quotaUsage: {},
+    // derived quota metrics for percentages used
     usageMetrics: {},
+    // quota reset
+    quotaResetDaysRemaining: undefined,
+    quotaResetDate: undefined,
+    // failed payments
+    accountPastDue: undefined,
+    pastDueEndDate: undefined,
+    pastDueDaysRemaining: undefined,
+    accountDowngraded: undefined,
   }
   const oneDayInMilliseconds = 86400000
 
@@ -16,10 +33,39 @@ export const createLicensingStore = () => {
 
   const actions = {
     init: async () => {
-      await actions.getQuotaUsage()
-      await actions.getUsageMetrics()
+      actions.setNavigation()
+      actions.setLicense()
+      await actions.setQuotaUsage()
+      actions.setUsageMetrics()
     },
-    getQuotaUsage: async () => {
+    setNavigation: () => {
+      const upgradeUrl = `${get(admin).accountPortalUrl}/portal/upgrade`
+      const goToUpgradePage = () => {
+        window.location.href = upgradeUrl
+      }
+      store.update(state => {
+        return {
+          ...state,
+          goToUpgradePage,
+        }
+      })
+    },
+    setLicense: () => {
+      const license = get(auth).user.license
+      const isFreePlan = license?.plan.type === Constants.PlanType.FREE
+      const groupsEnabled = license.features.includes(
+        Constants.Features.USER_GROUPS
+      )
+      store.update(state => {
+        return {
+          ...state,
+          license,
+          isFreePlan,
+          groupsEnabled,
+        }
+      })
+    },
+    setQuotaUsage: async () => {
       const quotaUsage = await API.getQuotaUsage()
       store.update(state => {
         return {
@@ -28,7 +74,7 @@ export const createLicensingStore = () => {
         }
       })
     },
-    getUsageMetrics: async () => {
+    setUsageMetrics: () => {
       if (isEnabled(FEATURE_FLAGS.LICENSING)) {
         const quota = get(store).quotaUsage
         const license = get(auth).user.license
@@ -97,9 +143,6 @@ export const createLicensingStore = () => {
             accountPastDue: pastDueAtMilliseconds != null,
             pastDueEndDate,
             pastDueDaysRemaining,
-            isFreePlan: () => {
-              return license?.plan.type === Constants.PlanType.FREE
-            },
           }
         })
       }