✨ Multi-level aside navbar

Author: AnandChowdhary

components/Manage.vue

@@ -17,18 +17,33 @@
           <font-awesome-icon class="nav-icon" icon="box-open" fixed-width />
           <span>Subscription</span>
         </nuxt-link>
-        <nuxt-link class="item" :to="`/manage/${$route.params.team}/billing`">
+        <nuxt-link
+          class="item item--type-parent"
+          :to="`/manage/${$route.params.team}/billing/details`"
+        >
           <font-awesome-icon class="nav-icon" icon="address-card" fixed-width />
-          <span>Billing info</span>
-        </nuxt-link>
-        <nuxt-link class="item" :to="`/manage/${$route.params.team}/sources`">
-          <font-awesome-icon class="nav-icon" icon="credit-card" fixed-width />
-          <span>Payment methods</span>
-        </nuxt-link>
-        <nuxt-link class="item" :to="`/manage/${$route.params.team}/invoices`">
-          <font-awesome-icon class="nav-icon" icon="file-invoice" fixed-width />
-          <span>Invoices</span>
+          <span>Billing</span>
         </nuxt-link>
+        <nav v-if="$route.path.includes('/billing/')" class="sub-nav">
+          <nuxt-link
+            class="sub-item"
+            :to="`/manage/${$route.params.team}/billing/details`"
+          >
+            <span>Customer info</span>
+          </nuxt-link>
+          <nuxt-link
+            class="sub-item"
+            :to="`/manage/${$route.params.team}/billing/sources`"
+          >
+            <span>Payment methods</span>
+          </nuxt-link>
+          <nuxt-link
+            class="sub-item"
+            :to="`/manage/${$route.params.team}/billing/invoices`"
+          >
+            <span>Invoices</span>
+          </nuxt-link>
+        </nav>
         <nuxt-link class="item" :to="`/manage/${$route.params.team}/data`">
           <font-awesome-icon class="nav-icon" icon="database" fixed-width />
           <span>Data &amp; security</span>
@@ -37,10 +52,6 @@
           <font-awesome-icon class="nav-icon" icon="code" fixed-width />
           <span>Developer APIs</span>
         </nuxt-link>
-        <nuxt-link class="item" to="/settings/account">
-          <font-awesome-icon class="nav-icon" icon="user" fixed-width />
-          <span>Your account</span>
-        </nuxt-link>
       </nav>
     </aside>
     <div class="card">
@@ -58,8 +69,6 @@ import {
   faDatabase,
   faUsers,
   faCog,
-  faCreditCard,
-  faFileInvoice,
   faBoxOpen,
   faUser,
   faAddressCard,
@@ -69,8 +78,6 @@ library.add(
   faDatabase,
   faUsers,
   faCog,
-  faCreditCard,
-  faFileInvoice,
   faBoxOpen,
   faUser,
   faCode,
@@ -121,20 +128,22 @@ aside nav {
       opacity: 0.75;
     }
   }
+  &.nuxt-link-active:not(.item--type-parent) {
+    font-weight: bold;
+  }
+}
+.sub-nav {
+  margin-top: -0.5rem;
+  border-left: 0.1rem solid rgba(0, 0, 0, 0.1);
+  padding-left: 1.4rem;
+  margin-left: 0.5rem;
+}
+.sub-item {
+  display: block;
+  color: inherit;
+  margin: 0.5rem 0;
   &.nuxt-link-active {
     font-weight: bold;
-    padding-left: 1rem;
-    margin-left: -1rem;
-    color: #492257;
-    background-color: #fff;
-    border-radius: 0.2rem 0 0 0.2rem;
-    box-shadow: -7px 10px 10px rgba(60, 66, 87, 0.075), 2px 0 0 #fff;
-    &:hover {
-      opacity: 1;
-    }
-    .nav-icon {
-      opacity: 0.75;
-    }
   }
 }
 </style>

pages/manage/_team/api-keys/index.vue

@@ -67,7 +67,7 @@
                   data-balloon="Delete"
                   data-balloon-pos="up"
                   class="button button--type-icon button--color-danger"
-                  @click="deleteApiKey(apiKey.apiKey)"
+                  @click="() => (showDelete = apiKey)"
                 >
                   <font-awesome-icon
                     title="Delete"
@@ -104,6 +104,10 @@
         </div>
       </div>
       <h2>Create API key</h2>
+      <p>
+        You can use API keys to programmatically access Staart in your
+        applications.
+      </p>
       <form @submit.prevent="createApiKey">
         <div class="fake-radio-container">
           <label>
@@ -122,13 +126,32 @@
         <button class="button">Create API key</button>
       </form>
     </div>
+    <transition name="modal">
+      <Confirm v-if="showDelete" :on-close="() => (showDelete = null)">
+        <h2>Are you sure you want to delete this API key?</h2>
+        <p>
+          Deleting an API key is not reversible, and you'll need to update any
+          apps using this key.
+        </p>
+        <button
+          class="button button--color-danger-cta"
+          @click="deleteApiKey(showDelete.apiKey)"
+        >
+          Yes, delete API key
+        </button>
+        <button type="button" class="button" @click="showDelete = null">
+          No, don't delete
+        </button>
+      </Confirm>
+    </transition>
   </main>
 </template>
 
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { mapGetters } from "vuex";
 import Loading from "@/components/Loading.vue";
+import Confirm from "@/components/Confirm.vue";
 import TimeAgo from "@/components/TimeAgo.vue";
 import LargeMessage from "@/components/LargeMessage.vue";
 import Input from "@/components/form/Input.vue";
@@ -145,12 +168,13 @@ import {
   faCloudDownloadAlt,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
-import { ApiKeys, emptyPagination } from "../../../../types/manage";
+import { ApiKeys, emptyPagination, ApiKey } from "../../../../types/manage";
 library.add(faPencilAlt, faCloudDownloadAlt, faArrowDown, faSync, faTrash);
 
 @Component({
   components: {
     Loading,
+    Confirm,
     TimeAgo,
     Input,
     FontAwesomeIcon,
@@ -162,6 +186,7 @@ library.add(faPencilAlt, faCloudDownloadAlt, faArrowDown, faSync, faTrash);
 })
 export default class ManageSettings extends Vue {
   apiKeys: ApiKeys = emptyPagination;
+  showDelete: ApiKey | null = null;
   loadingMore = false;
   loading = "";
   newApiKeyAccess = 0;
@@ -222,6 +247,23 @@ export default class ManageSettings extends Vue {
       })
       .finally(() => (this.loading = ""));
   }
+
+  private deleteApiKey(key: string) {
+    this.showDelete = null;
+    this.loading = "Deleting your API key";
+    this.$store
+      .dispatch("manage/deleteApiKey", {
+        team: this.$route.params.team,
+        id: key
+      })
+      .then(apiKeys => {
+        this.apiKeys = { ...apiKeys };
+      })
+      .catch(error => {
+        throw new Error(error);
+      })
+      .finally(() => (this.loading = ""));
+  }
 }
 </script>
 

pages/manage/_team/data.vue pages/manage/_team/billing/data.vuepages/manage/_team/data.vue renamed to pages/manage/_team/billing/data.vue

@@ -1,6 +1,23 @@
 <template>
   <main>
-    <h1>Billing</h1>
+    <div class="row">
+      <h1>Billing</h1>
+      <div class="text text--align-right">
+        <button
+          data-balloon="Refresh"
+          data-balloon-pos="down"
+          class="button button--type-icon"
+          @click="load"
+        >
+          <font-awesome-icon
+            title="Refresh"
+            class="icon"
+            icon="sync"
+            fixed-width
+          />
+        </button>
+      </div>
+    </div>
     <p>
       Manage your billing account details. This information will be used for
       invoicing.
@@ -16,7 +33,7 @@
                 <span style="text-transform: uppercase">{{
                   billing.currency || "eur"
                 }}</span>
-                {{ parseFloat(billing.account_balance).toFixed(2) }}
+                {{ billing.account_balance | currency }}
               </td>
             </tr>
             <tr>
@@ -112,15 +129,27 @@ import ImageInput from "@/components/form/Image.vue";
 import Checkbox from "@/components/form/Checkbox.vue";
 import { getAllCountries } from "countries-and-timezones";
 import { User } from "@/types/auth";
-import { Billing, emptyBilling, emptyAddress } from "../../../types/manage";
+import {
+  Billing,
+  emptyBilling,
+  emptyAddress,
+  Sources,
+  emptyPagination
+} from "@/types/manage";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSync } from "@fortawesome/free-solid-svg-icons";
+
+library.add(faSync);
 
 @Component({
   components: {
     Loading,
     Input,
     Select,
     ImageInput,
-    Checkbox
+    Checkbox,
+    FontAwesomeIcon
   },
   computed: mapGetters({
     user: "auth/user"
@@ -149,6 +178,10 @@ export default class ManageSettings extends Vue {
   }
 
   private mounted() {
+    this.load();
+  }
+
+  private load() {
     this.loading = "Loading billing details";
     this.$store
       .dispatch("manage/getBilling", this.$route.params.team)

pages/manage/_team/billing.vue pages/manage/_team/billing/details.vuepages/manage/_team/billing.vue renamed to pages/manage/_team/billing/details.vue

@@ -113,7 +113,7 @@ import {
   faFileInvoice
 } from "@fortawesome/free-solid-svg-icons";
 import { invoices } from "stripe";
-import { Invoices, emptyPagination } from "../../../../types/manage";
+import { Invoices, emptyPagination } from "@/types/manage";
 library.add(faCloudDownloadAlt, faFileInvoice);
 
 @Component({

pages/manage/_team/invoices/_id.vue …es/manage/_team/billing/invoices/_id.vuepages/manage/_team/invoices/_id.vue renamed to pages/manage/_team/billing/invoices/_id.vue pages/manage/_team/invoices/_id.vue renamed to pages/manage/_team/billing/invoices/_id.vue

@@ -5,7 +5,7 @@
       heading="No billing account"
       text="You need to setup a billing account before you view your invoices."
       cta-text="Setup billing"
-      :cta-to="`/manage/${$route.params.team}/billing`"
+      :cta-to="`/manage/${$route.params.team}/billing/details`"
     />
     <Loading v-else-if="loading" :message="loading" />
     <div v-else>
@@ -93,7 +93,9 @@
                   />
                 </a>
                 <router-link
-                  :to="`/manage/${$route.params.team}/invoices/${invoice.id}`"
+                  :to="
+                    `/manage/${$route.params.team}/billing/invoices/${invoice.id}`
+                  "
                   data-balloon="Details"
                   data-balloon-pos="up"
                   class="button button--type-icon"
@@ -156,7 +158,7 @@ import {
   faCreditCard,
   faCloudDownloadAlt
 } from "@fortawesome/free-solid-svg-icons";
-import { Invoices, emptyPagination } from "../../../../types/manage";
+import { Invoices, emptyPagination } from "@/types/manage";
 library.add(
   faFileInvoiceDollar,
   faCreditCard,

pages/manage/_team/invoices/index.vue …/manage/_team/billing/invoices/index.vuepages/manage/_team/invoices/index.vue renamed to pages/manage/_team/billing/invoices/index.vue pages/manage/_team/invoices/index.vue renamed to pages/manage/_team/billing/invoices/index.vue

@@ -39,7 +39,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCloudDownloadAlt } from "@fortawesome/free-solid-svg-icons";
 import { sources } from "stripe";
-import { Sources, emptyPagination } from "../../../../types/manage";
+import { Sources, emptyPagination } from "@/types/manage";
 library.add(faCloudDownloadAlt);
 
 @Component({

pages/manage/_team/sources/_id.vue …ges/manage/_team/billing/sources/_id.vuepages/manage/_team/sources/_id.vue renamed to pages/manage/_team/billing/sources/_id.vue pages/manage/_team/sources/_id.vue renamed to pages/manage/_team/billing/sources/_id.vue

@@ -5,7 +5,7 @@
       heading="No billing account"
       text="You need to setup a billing account before you view your sources."
       cta-text="Setup billing"
-      :cta-to="`/manage/${$route.params.team}/billing`"
+      :cta-to="`/manage/${$route.params.team}/billing/details`"
     />
     <Loading v-else-if="loading" :message="loading" />
     <div v-else>
@@ -50,7 +50,9 @@
               </td>
               <td class="text text--align-right">
                 <router-link
-                  :to="`/manage/${$route.params.team}/sources/${source.id}`"
+                  :to="
+                    `/manage/${$route.params.team}/billing/sources/${source.id}`
+                  "
                   data-balloon="Details"
                   data-balloon-pos="up"
                   class="button button--type-icon"
@@ -113,7 +115,7 @@ import {
   faSync,
   faCloudDownloadAlt
 } from "@fortawesome/free-solid-svg-icons";
-import { Sources, emptyPagination } from "../../../../types/manage";
+import { Sources, emptyPagination } from "@/types/manage";
 library.add(faPencilAlt, faCloudDownloadAlt, faArrowDown, faSync);
 
 @Component({

pages/manage/_team/sources/index.vue …s/manage/_team/billing/sources/index.vuepages/manage/_team/sources/index.vue renamed to pages/manage/_team/billing/sources/index.vue pages/manage/_team/sources/index.vue renamed to pages/manage/_team/billing/sources/index.vue

@@ -5,7 +5,7 @@
       heading="No billing account"
       text="You need to setup a billing account before you can create a subscription."
       cta-text="Setup billing"
-      :cta-to="`/manage/${$route.params.team}/billing`"
+      :cta-to="`/manage/${$route.params.team}/billing/details`"
     />
     <Loading v-else-if="loading" :message="loading" />
     <div v-else>