From bfe8d839b5d0194285620bad3f4afbbe49af99f6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 15 Dec 2022 16:50:08 +0000
Subject: [PATCH] Update structure for account pages

---
 .../src/pages/builder/portal/_layout.svelte   | 13 ++--
 .../builder/portal/account/_layout.svelte     | 25 +++++++
 .../pages/builder/portal/account/index.svelte |  4 ++
 .../{settings => account}/upgrade.svelte      | 68 +++++++------------
 .../index.svelte => account/usage.svelte}     |  0
 .../builder/portal/overview/index.svelte      |  4 ++
 .../builder/portal/settings/_layout.svelte    |  5 --
 7 files changed, 64 insertions(+), 55 deletions(-)
 create mode 100644 packages/builder/src/pages/builder/portal/account/_layout.svelte
 create mode 100644 packages/builder/src/pages/builder/portal/account/index.svelte
 rename packages/builder/src/pages/builder/portal/{settings => account}/upgrade.svelte (72%)
 rename packages/builder/src/pages/builder/portal/{usage/index.svelte => account/usage.svelte} (100%)
 create mode 100644 packages/builder/src/pages/builder/portal/overview/index.svelte

diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 6272b29185..ff310c540a 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -57,8 +57,8 @@
           href: "/builder/portal/plugins",
         },
         {
-          title: "Usage",
-          href: "/builder/portal/usage",
+          title: "Account",
+          href: "/builder/portal/account",
         },
         {
           title: "Settings",
@@ -183,10 +183,7 @@
           />
         </div>
         {#if !$adminStore.cloud && $auth.isAdmin}
-          <Button
-            cta
-            on:click={() => $goto("/builder/portal/settings/upgrade")}
-          >
+          <Button cta on:click={() => $goto("/builder/portal/account/upgrade")}>
             Upgrade
           </Button>
         {/if}
@@ -216,8 +213,8 @@
             <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
               Close developer mode
             </MenuItem>
-            <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}
-              >Log out
+            <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}>
+              Log out
             </MenuItem>
           </ActionMenu>
         </div>
diff --git a/packages/builder/src/pages/builder/portal/account/_layout.svelte b/packages/builder/src/pages/builder/portal/account/_layout.svelte
new file mode 100644
index 0000000000..cbe86daf7c
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/account/_layout.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { url, isActive } from "@roxi/routify"
+  import { Page } from "@budibase/bbui"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"
+</script>
+
+<Page narrow>
+  <Content>
+    <div slot="side-nav">
+      <SideNav>
+        <SideNavItem
+          text="Usage"
+          url={$url("./usage")}
+          active={$isActive("./usage")}
+        />
+        <SideNavItem
+          text="Upgrade"
+          url={$url("./upgrade")}
+          active={$isActive("./upgrade")}
+        />
+      </SideNav>
+    </div>
+    <slot />
+  </Content>
+</Page>
diff --git a/packages/builder/src/pages/builder/portal/account/index.svelte b/packages/builder/src/pages/builder/portal/account/index.svelte
new file mode 100644
index 0000000000..141cf2a73e
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/account/index.svelte
@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  $redirect("./usage")
+</script>
diff --git a/packages/builder/src/pages/builder/portal/settings/upgrade.svelte b/packages/builder/src/pages/builder/portal/account/upgrade.svelte
similarity index 72%
rename from packages/builder/src/pages/builder/portal/settings/upgrade.svelte
rename to packages/builder/src/pages/builder/portal/account/upgrade.svelte
index 5d10f22396..5e1a116fc4 100644
--- a/packages/builder/src/pages/builder/portal/settings/upgrade.svelte
+++ b/packages/builder/src/pages/builder/portal/account/upgrade.svelte
@@ -8,6 +8,7 @@
     Button,
     Input,
     Label,
+    ButtonGroup,
     notifications,
   } from "@budibase/bbui"
   import { auth, admin } from "stores/portal"
@@ -103,10 +104,10 @@
         {#if license.plan.type === "free"}
           Upgrade your Budibase installation to unlock additional features. To
           subscribe to a plan visit your
-          <Link size="L" href={upgradeUrl}>Account</Link>.
+          <Link size="L" href={upgradeUrl}>account</Link>.
         {:else}
           To manage your plan visit your
-          <Link size="L" href={upgradeUrl}>Account</Link>.
+          <Link size="L" href={upgradeUrl}>account</Link>
         {/if}
       </Body>
     </Layout>
@@ -127,44 +128,33 @@
           />
         </div>
       </div>
-      <div class="button-container">
-        <div class="action-button">
-          <Button cta on:click={activate} disabled={activateDisabled}
-            >Activate</Button
-          >
-        </div>
-        <div class="action-button">
-          {#if licenseInfo?.licenseKey}
-            <Button warning on:click={() => deleteLicenseKeyModal.show()}
-              >Delete</Button
-            >
-          {/if}
-        </div>
-      </div>
+      <ButtonGroup>
+        <Button cta on:click={activate} disabled={activateDisabled}>
+          Activate
+        </Button>
+        {#if licenseInfo?.licenseKey}
+          <Button warning on:click={() => deleteLicenseKeyModal.show()}>
+            Delete
+          </Button>
+        {/if}
+      </ButtonGroup>
     </Layout>
     <Divider />
-    <Layout gap="L" noPadding>
-      <Layout gap="S" noPadding>
-        <Heading size="S">Plan</Heading>
-        <Layout noPadding gap="XXS">
-          <Body size="S">You are currently on the {license.plan.type} plan</Body
-          >
-          <Body size="XS">
-            {processStringSync(
-              "Updated {{ duration time 'millisecond' }} ago",
-              {
-                time:
-                  new Date().getTime() -
-                  new Date(license.refreshedAt).getTime(),
-              }
-            )}
-          </Body>
-        </Layout>
+    <Layout gap="XS" noPadding>
+      <Heading size="S">Plan</Heading>
+      <Layout noPadding gap="XXS">
+        <Body size="S">You are currently on the {license.plan.type} plan</Body>
+        <Body size="XS">
+          {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
+            time:
+              new Date().getTime() - new Date(license.refreshedAt).getTime(),
+          })}
+        </Body>
       </Layout>
-      <div>
-        <Button secondary on:click={refresh}>Refresh</Button>
-      </div>
     </Layout>
+    <div>
+      <Button secondary on:click={refresh}>Refresh</Button>
+    </div>
   </Layout>
 {/if}
 
@@ -179,10 +169,4 @@
     grid-gap: var(--spacing-l);
     align-items: center;
   }
-  .action-button {
-    margin-right: 10px;
-  }
-  .button-container {
-    display: flex;
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/usage/index.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/portal/usage/index.svelte
rename to packages/builder/src/pages/builder/portal/account/usage.svelte
diff --git a/packages/builder/src/pages/builder/portal/overview/index.svelte b/packages/builder/src/pages/builder/portal/overview/index.svelte
new file mode 100644
index 0000000000..6881a9ca67
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/overview/index.svelte
@@ -0,0 +1,4 @@
+<script>
+  import { redirect } from "@roxi/routify"
+  $redirect("../")
+</script>
diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
index dde65aac85..a17f625634 100644
--- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
@@ -38,11 +38,6 @@
           url={$url("./theme")}
           active={$isActive("./theme")}
         />
-        <SideNavItem
-          text="Upgrade"
-          url={$url("./upgrade")}
-          active={$isActive("./upgrade")}
-        />
       </SideNav>
     </div>
     <slot />