Add Customers Listing Page

resources/js/components/ChargesTable.vue

@@ -48,23 +48,23 @@
             </div>
 
             <charges-pagination-links
-                    :charges="charges"
-                    :hasMore="hasMore"
-                    :hasPrevious="hasPrevious"
-                    @previous="previousPage"
-                    @next="nextPage"
+                :resource="charges"
+                :hasMore="hasMore"
+                :hasPrevious="hasPrevious"
+                @previous="previousPage"
+                @next="nextPage"
             ></charges-pagination-links>
         </loading-card>
     </loading-view>
 </template>
 
 <script>
-import ChargesPaginationLinks from './ChargesPaginationLinks.vue';
-import money from '../utils/moneyFormat';
+import ChargesPaginationLinks from "./PaginationLinks.vue";
+import money from "../utils/moneyFormat";
 
 export default {
     components: {
-        'charges-pagination-links': ChargesPaginationLinks
+        "charges-pagination-links": ChargesPaginationLinks,
     },
     props: ['columns'],
     data() {
@@ -86,12 +86,16 @@ export default {
     computed: {
         hasPrevious() {
             return this.page > 1
+        },
+        statusClass(status) {
+            return this.statusClassList[status];
         }
     },
     methods: {
         moment: moment,
         listCharges(params) {
-            Nova.request().get('/nova-vendor/nova-stripe/stripe/charges', { params })
+            Nova.request()
+                .get("/nova-vendor/nova-stripe/stripe/charges", { params })
                 .then((response) => {
                     this.charges = response.data.charges.data
                     this.charges.length > 0 ? this.$emit('charge', this.charges[0]) : '';
@@ -101,34 +105,33 @@ export default {
                 })
         },
         nextPage() {
-            this.loading = true
+            this.loading = true;
 
-            this.listCharges({ 'starting_after': this.charges[this.charges.length - 1].id })
+            this.listCharges({
+                starting_after: this.charges[this.charges.length - 1].id,
+            });
 
-            this.page++
+            this.page++;
         },
         previousPage() {
-            this.loading = true
+            this.loading = true;
 
-            this.listCharges({ 'ending_before': this.charges[0].id })
+            this.listCharges({ ending_before: this.charges[0].id });
 
             if (this.hasPrevious) {
-                this.page--
+                this.page--;
             }
         },
-        statusClass(status) {
-            return this.statusClassList[status];
-        },
     },
     filters: {
         date(date) {
-            return moment.unix(date).format('YYYY/MM/DD h:mm:ss a')
+            return moment.unix(date).format("YYYY/MM/DD h:mm:ss a");
         },
 
-        money
+        money,
     },
     created() {
-        this.listCharges()
+        this.listCharges();
     },
-}
+};
 </script>

resources/js/components/CustomersTable.vue

@@ -0,0 +1,138 @@
+<template>
+    <loading-view :loading="initialLoading">
+        <loading-card :loading="loading" class="card relative">
+            <table
+                v-if="customers.length > 0"
+                class="table w-full"
+                cellpadding="0"
+                cellspacing="0"
+                data-testid="resource-table"
+            >
+                <thead>
+                    <tr>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Customer ID
+                            </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center"> Name </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Email
+                            </span>
+                        </th>
+                        <th class="text-left">
+                            <span class="inline-flex items-center">
+                                Balance
+                            </span>
+                        </th>
+                    </tr>
+                </thead>
+
+                <tbody v-for="customer in customers">
+                    <tr>
+                        <td>{{ customer.id }}</td>
+                        <td>{{ customer.name }}</td>
+                        <td>{{ customer.email }}</td>
+                        <td>
+                            <span v-if="customer.currency">
+                                {{ customer.currency | money(customer.balance) }}
+                            </span>
+                            <span v-else>-</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <div v-else class="text-90">No customers</div>
+
+            <customers-pagination-links
+                :resource="customers"
+                :hasMore="hasMore"
+                :hasPrevious="hasPrevious"
+                @previous="previousPage"
+                @next="nextPage"
+            ></customers-pagination-links>
+        </loading-card>
+    </loading-view>
+</template>
+
+<script>
+import CustomersPaginationLinks from "./PaginationLinks.vue";
+import money from "../utils/moneyFormat";
+
+export default {
+    components: {
+        "customers-pagination-links": CustomersPaginationLinks,
+    },
+
+    data() {
+        return {
+            customers: {},
+            initialLoading: true,
+            loading: false,
+            hasMore: false,
+            page: 1,
+        };
+    },
+
+    methods: {
+        moment: moment,
+
+        listCustomers(params) {
+            Nova.request()
+                .get("/nova-vendor/nova-stripe/stripe/customers", { params })
+                .then((response) => {
+                    this.customers = response.data.customers.data;
+                    this.hasMore = response.data.customers.has_more;
+                    this.initialLoading = false;
+                    this.loading = false;
+                });
+        },
+
+        nextPage() {
+            this.loading = true;
+
+            this.listCustomers({
+                starting_after: this.customers[this.customers.length - 1].id,
+            });
+
+            this.page++;
+        },
+
+        previousPage() {
+            this.loading = true;
+
+            this.listCustomers({ ending_before: this.customers[0].id });
+
+            if (this.hasPrevious) {
+                this.page--;
+            }
+        },
+    },
+
+    computed: {
+        hasPrevious() {
+            return this.page > 1;
+        },
+    },
+
+    filters: {
+        date(date) {
+            return moment.unix(date).format("YYYY/MM/DD h:mm:ss a");
+        },
+
+        money,
+    },
+
+    created() {
+        this.listCustomers();
+    },
+};
+</script>
+
+<style>
+/* Scoped Styles */
+</style>

resources/js/components/ChargesPaginationLinks.vue → resources/js/components/PaginationLinks.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="bg-20 rounded-b">
-        <nav v-if="charges.length > 0" class="flex">
+        <nav v-if="resource.length > 0" class="flex">
             <!-- Previous Link -->
             <button
                     :disabled="!hasPrevious"
@@ -36,7 +36,7 @@
 
 <script>
     export default {
-        props: ['charges', 'hasMore', 'hasPrevious'],
+        props: ['resource', 'hasMore', 'hasPrevious'],
 
         methods: {
             /**

resources/js/tool.js

@@ -1,17 +1,23 @@
 Nova.booting((Vue, router) => {
-    Vue.config.devtools = true
+    Vue.config.devtools = true;
 
     router.addRoutes([
         {
-            name: 'nova-stripe',
-            path: '/nova-stripe',
-            component: require('./views/Index'),
+            name: "nova-stripe",
+            path: "/nova-stripe",
+            component: require("./views/Index"),
         },
         {
-            name: 'charge-detail',
-            path: '/nova-stripe/charge/:chargeId',
-            component: require('./views/Detail'),
+            name: "charge-detail",
+            path: "/nova-stripe/charge/:chargeId",
+            component: require("./views/Detail"),
             props: true,
         },
-    ])
-})
+        {
+            name: "customer-list",
+            path: "/nova-stripe/customers",
+            component: require("./views/Customers"),
+            props: true,
+        },
+    ]);
+});

resources/js/views/Customers.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <heading class="mb-6">Customers</heading>
+
+        <customers-table />
+    </div>
+</template>
+
+<script>
+import CustomersTable from "../components/CustomersTable";
+
+export default {
+    components: { CustomersTable },
+};
+</script>

resources/views/navigation.blade.php

@@ -14,3 +14,9 @@ class="cursor-pointer flex items-center font-normal dim text-white mb-6 text-bas
         Stripe
     </span>
 </router-link>
+
+<router-link tag="h4" :to="{name: 'customer-list'}" class="cursor-pointer flex items-center font-normal dim text-white text-sm no-underline leading-tight mb-4 ml-8 text-sm">
+    <span class="sidebar-label">
+        Customers
+    </span>
+</router-link>

routes/api.php

@@ -4,6 +4,7 @@
 use Illuminate\Support\Facades\Route;
 use Tighten\NovaStripe\Http\StripeBalanceController;
 use Tighten\NovaStripe\Http\StripeChargesController;
+use Tighten\NovaStripe\Http\StripeCustomersController;
 
 /*
 |--------------------------------------------------------------------------
@@ -20,3 +21,4 @@
 Route::get('/stripe/charges/{id}', StripeChargesController::class . '@show');
 Route::post('/stripe/charges/{id}/refund', StripeChargesController::class . '@refund');
 Route::get('/stripe/balance', StripeBalanceController::class . '@index');
+Route::get('/stripe/customers', StripeCustomersController::class . '@index');

src/Clients/StripeClient.php

@@ -5,6 +5,7 @@
 use Exception;
 use Stripe\Balance;
 use Stripe\Charge;
+use Stripe\Customer;
 use Stripe\Refund;
 
 class StripeClient
@@ -54,6 +55,15 @@ public function getBalance()
         }
     }
 
+    public function listCustomers($options = [])
+    {
+        try {
+            return Customer::all($options, ['api_key' => $this->apiKey]);
+        } catch (Exception $e) {
+
+        }
+    }
+
     public function refundCharge($chargeId)
     {
         try {

src/Http/StripeCustomersController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace Tighten\NovaStripe\Http;
+
+use Illuminate\Routing\Controller;
+use Tighten\NovaStripe\Clients\StripeClient;
+
+class StripeCustomersController extends Controller
+{
+    public function index()
+    {
+        return response()->json(['customers' => (new StripeClient)->listCustomers()]);
+    }
+}