showing more info for stripe members, showing data in proper table

server/db/db.js

@@ -79,7 +79,6 @@ export default class Database {
     }
 
     updateNode(prefix, id, toEdit) {
-        console.log("update node, ", toEdit)
         try {
             let model = nodeModels[prefix]
             if(model) {
@@ -130,9 +129,7 @@ export default class Database {
         try {
             let model = edgeModels[prefix]
             if(model) {
-                console.log(model.indices[0] + (id - 1))
                 this.edges[model.indices[0] + (id - 1)] = 0
-                console.log(this.edges[model.indices[0] + (id - 1)])
             } else {
                 throw new Error("Type does not exist for edge: " + prefix)
             }

server/index.js

@@ -75,7 +75,7 @@ class Server {
                 const contact = contactRaw.trim() ? JSON.parse(contactRaw) : [];
                 const members = db.members.getByNetwork(networkId)
                 let stripeMembers = await payments.getCustomers(networkId)
-                stripeMembers = stripeMembers.data
+                console.log("stripemenbers: ", stripeMembers)
     
                 res.json({
                     join,

server/payments.js

@@ -8,7 +8,6 @@ export default class PaymentsHandler {
 
     static async finishConnectSetup(req, res) {
         const { code, networkId } = req.body;
-        console.log("onboarded", networkId)
 
         const response = await stripe.oauth.token({
             grant_type: "authorization_code",
@@ -54,10 +53,26 @@ export default class PaymentsHandler {
             throw new Error("Can't get customers for account that doesn't exist!")
         }
         const customers = await stripe.customers.list(
-            { limit: 100 },
+            { limit: 100, expand: ['data.subscriptions'] },
             { stripeAccount: network.stripeAccountId }
         );
-        return customers
+        console.log(customers)
+
+        return customers.data.map(customer => ({
+            id: customer.id,
+            email: customer.email,
+            created: customer.created,
+            name: customer.name,
+            phone: customer.phone,
+            city: customer.address?.city,
+            subscriptions: customer.subscriptions?.data.map(sub => ({
+                id: sub.id,
+                status: sub.status,
+                amount: sub.items.data[0]?.price.unit_amount / 100, // converts cents to dollars
+                currency: sub.items.data[0]?.price.currency,
+                interval: sub.items.data[0]?.price.recurring?.interval
+            }))
+        }))
     }
 
     static async newSubscription(req, res) {

ui/desktop/apps/People/People.js

@@ -4,56 +4,116 @@ class People extends Shadow {
             h1("Members")
                 .fontWeight("bold")
                 .marginBottom(2, em)
+                .marginLeft(4, em)
 
-            HStack(() => {
+            VStack(() => {
                 VStack(() => {
                     p("Officers")
                     .marginBottom(2, vh)
+                    .marginLeft(8, em)
                     .fontStyle("italic")
         
-                    for(let i = 0; i < global.currentNetwork.data.members.length; i++) {
+                    ZStack(() => {
-                        let member = global.currentNetwork.data.members[i]
+                        new gridjs.Grid({
-                        HStack(() => {
+                            columns: ["Name", "Email"],
-                            p(member.firstName + " " + member.lastName)
+                            data: global.currentNetwork.data.members.map(m => [
-                            .width(10, vw)
+                                m.firstName + " " + m.lastName,
-                            p(member.email)
+                                m.email
-                            .width(10, vw)
+                            ]),
-                        })
+                            sort: true,
-                    }
+                            search: true,
+                            style: {
+                                table: {
+                                    'background-color': 'var(--window)',
+                                    'color': 'var(--accent)',
+                                    'box-shadow': 'none',
+                                    'font-size': '0.9em'
+                                },
+                                th: {
+                                    'background-color': 'var(--window)',
+                                    'color': 'var(--accent)',
+                                    'border': 'none',
+                                    'border-bottom': '1px solid rgb(69 53 53)'
+                                },
+                                td: {
+                                    'background-color': 'var(--window)',
+                                    'color': 'var(--accent)',
+                                    'border': 'none',
+                                    'border-bottom': '1px solid rgb(69 53 53)'
+                                }
+                            }
+                        }).render(quill.rendering.last)
+                    })
                 })
                 .gap(0.5, em)
 
                 VStack(() => {
                     p("Stripe Subscribers")
                     .marginBottom(2, vh)
+                    .marginLeft(8, em)
                     .fontStyle("italic")
         
-                    for(let i = 0; i < global.currentNetwork.data.stripeMembers.length; i++) {
+                    ZStack(() => {
-                        let member = global.currentNetwork.data.stripeMembers[i]
+                        new gridjs.Grid({
-                        HStack(() => {
+                            columns: ["Amount", "Name", "Email", "Phone", "Area", "Created"],
-                            p(member.name)
+                            data: global.currentNetwork.data.stripeMembers.map(m => [
-                            .width(10, vw)
+                                "$" + m.subscriptions[0].amount,
-                            p(member.email)
+                                m.name,
-                            .width(20, vw)
+                                m.email,
-                            p(new Date(member.created * 1000).toLocaleString('en-US', {
+                                m.phone,
-                                timeZone: 'America/Chicago',
+                                m.city,
-                                hour: 'numeric',
+                                new Date(m.created * 1000).toLocaleString('en-US', {
-                                minute: '2-digit',
+                                    timeZone: 'America/Chicago',
-                                month: 'numeric',
+                                    hour: 'numeric',
-                                day: 'numeric',
+                                    minute: '2-digit',
-                                year: 'numeric'
+                                    month: 'numeric',
-                            }))
+                                    day: 'numeric',
-                            .width(40, vw)
+                                    year: 'numeric'
-                        })
+                                })
-                    }
+                            ]),
+                            sort: true,
+                            search: true,
+                            style: {
+                                input: {
+                                    'background-color': 'var(--window)',
+                                },
+                                table: {
+                                    'background-color': 'var(--window)',
+                                    'color': 'var(--accent)',
+                                    'box-shadow': 'none',
+                                    'font-size': '0.9em'
+                                },
+                                th: {
+                                    'background-color': 'var(--window)',
+                                    'color': 'var(--accent)',
+                                    'border': 'none',
+                                    'border-bottom': '1px solid rgb(69 53 53)'
+                                },
+                                td: {
+                                    'background-color': 'var(--window)',
+                                    'color': 'var(--accent)',
+                                    'border': 'none',
+                                    'border-bottom': '1px solid rgb(69 53 53)'
+                                }
+                            }
+                        }).render(quill.rendering.last)
+
+                        css(`
+                            input.gridjs-input {
+                                background-color: var(--window);
+                                color: var(--accent);
+                                border: 1px solid rgb(69 53 53);
+                                margin-left: 8em
+                            }
+                        `)
+                    })
                 })
                 .gap(0.5, em)
             })
-            .gap(10, vw)
+            .gap(4, em)
         })
         .gap(0.5, em)
         .paddingTop(4, pct)
-        .paddingLeft(5, pct)
         .width(100, pct)
         .height(100, pct);
     }

ui/desktop/apps/Settings/Settings.js

@@ -34,7 +34,7 @@ class Settings extends Shadow {
                     p("Stripe Integration")
 
                     if(this.stripeDetails && this.stripeDetails.data.email) {
-                        p("connected")
+                        p("Connected")
                     } else if(this.stripeDetails && this.stripeDetails.data.connected === false) {
                         button("Set up Stripe")
                             .maxWidth(10, em)

ui/desktop/index.html

@@ -3,6 +3,8 @@
 <head>
     <title>Forum</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>
+    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
     <link rel="icon" href="/_/icons/columnred.svg">
     <link rel="stylesheet" href="/_/code/shared.css">
     <script>