✨ Support for listing invoices

Author: AnandChowdhary

components/LargeMessage.vue

@@ -27,7 +27,7 @@ export default class LargeMessage extends Vue {
 <style lang="scss" scoped>
 div {
   text-align: center;
-  max-width: 600px;
+  max-width: 400px;
   margin: auto;
 }
 h1 {

components/Manage.vue

@@ -14,6 +14,10 @@
           <font-awesome-icon class="nav-icon" icon="credit-card" fixed-width />
           <span>Billing</span>
         </nuxt-link>
+        <nuxt-link class="item" to="/manage/invoices">
+          <font-awesome-icon class="nav-icon" icon="file-invoice" fixed-width />
+          <span>Invoices</span>
+        </nuxt-link>
         <!-- <nuxt-link class="item" to="/manage/data">
           <font-awesome-icon class="nav-icon" icon="database" fixed-width />
           <span>Data &amp; security</span>
@@ -35,9 +39,10 @@ import {
   faDatabase,
   faUsers,
   faCog,
-  faCreditCard
+  faCreditCard,
+  faFileInvoice
 } from "@fortawesome/free-solid-svg-icons";
-library.add(faDatabase, faUsers, faCog, faCreditCard);
+library.add(faDatabase, faUsers, faCog, faCreditCard, faFileInvoice);
 
 @Component({
   components: {

pages/manage/billing.vue

@@ -55,47 +55,41 @@
           />
           <Input
             :value="addressLine1"
-            label="Line1"
-            placeholder="Choose the addressLine1"
-            required
+            label="Address"
+            placeholder="Enter your address"
             @input="val => (addressLine1 = val)"
           />
           <Input
             :value="addressLine2"
-            label="Line2"
-            placeholder="Choose the addressLine2"
-            required
+            label="Line 2"
+            placeholder="Add another address line"
             @input="val => (addressLine2 = val)"
           />
           <Input
             :value="addressCity"
             label="City"
-            placeholder="Choose the addressCity"
-            required
+            placeholder="Enter your city"
             @input="val => (addressCity = val)"
           />
-          <Select
-            :value="addressCountry"
-            label="Country"
-            placeholder="Select your billing country"
-            :options="countries"
-            required
-            @input="val => (addressCountry = val)"
-          />
           <Input
             :value="addressPostalCode"
             label="Postal code"
-            placeholder="Choose the addressPostalCode"
-            required
+            placeholder="Enter your postal code"
             @input="val => (addressPostalCode = val)"
           />
           <Input
             :value="addressState"
             label="State"
-            placeholder="Choose the addressState"
-            required
+            placeholder="Enter your state"
             @input="val => (addressState = val)"
           />
+          <Select
+            :value="addressCountry"
+            label="Country"
+            placeholder="Select your billing country"
+            :options="countries"
+            @input="val => (addressCountry = val)"
+          />
           <button class="button">
             Update settings
           </button>

pages/manage/invoices.vue

@@ -0,0 +1,77 @@
+<template>
+  <main>
+    <Manage>
+      <h1>Invoices</h1>
+      <Loading v-if="loading" :message="loading" />
+      <LargeMessage
+        v-else-if="!loading && !invoices.length"
+        heading="No invoices yet"
+        text="You don't have any invoices yet, come back here once you've made your first payment."
+      />
+      <div v-else>
+        <table class="table table--type-cols">
+          <tbody>
+            <tr
+              v-for="(invoice, index) in invoices.data"
+              :key="`${invoice.id}_${index}`"
+            >
+              <td>
+                {{ invoice }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Manage>
+  </main>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { mapGetters } from "vuex";
+import Manage from "@/components/Manage.vue";
+import Loading from "@/components/Loading.vue";
+import LargeMessage from "@/components/LargeMessage.vue";
+import Input from "@/components/form/Input.vue";
+import Select from "@/components/form/Select.vue";
+import Checkbox from "@/components/form/Checkbox.vue";
+import { getAllCountries } from "countries-and-timezones";
+import { User } from "../../types/auth";
+
+@Component({
+  components: {
+    Manage,
+    Loading,
+    Input,
+    Select,
+    LargeMessage,
+    Checkbox
+  },
+  computed: mapGetters({
+    organization: "auth/activeOrganization",
+    user: "auth/user",
+    invoices: "manage/invoices"
+  })
+})
+export default class ManageSettings extends Vue {
+  organization!: any;
+  invoices!: any;
+  user!: any;
+  loading = "";
+
+  private mounted() {
+    this.loading = "Loading invoices details";
+    this.$store
+      .dispatch("manage/getInvoices", this.organization.organization.id)
+      .then(invoices => {})
+      .catch(error => {
+        if (error.response.data.error === "no-customer") {
+          // this.name = this.user.name;
+        }
+      })
+      .finally(() => (this.loading = ""));
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

store/manage.ts

@@ -16,9 +16,13 @@ export const mutations: MutationTree<RootState> = {
   setBilling(state: RootState, billing: any): void {
     Vue.set(state, "billing", billing);
   },
+  setInvoices(state: RootState, invoices: any): void {
+    Vue.set(state, "invoices", invoices);
+  },
   clearAll(state: RootState): void {
     delete state.organization;
     delete state.billing;
+    delete state.invoices;
     delete state.members;
     delete state.membership;
   }
@@ -73,11 +77,18 @@ export const actions: ActionTree<RootState, RootState> = {
     delete data.id;
     await this.$axios.patch(`/organizations/${context.id}/billing`, data);
     return dispatch("getBilling", context.id);
+  },
+  async getInvoices({ commit }, context) {
+    const invoices: any = (await this.$axios.get(
+      `/organizations/${context}/invoices`
+    )).data;
+    commit("setInvoices", invoices);
   }
 };
 
 export const getters: GetterTree<RootState, RootState> = {
   membership: state => state.membership,
   billing: state => state.billing,
+  invoices: state => state.invoices,
   members: state => state.members
 };

types/manage.ts

@@ -16,4 +16,5 @@ export interface RootState {
   organization?: Organization;
   members: Member[];
   billing?: any;
+  invoices?: any;
 }