Payment Implementation

backend/database.js

@@ -159,8 +159,8 @@ export function streamEntriesSince (contractId: string, hash: string) {
   .orderBy('id')
   .pipe(new Transform({
     // NOTE: Hapi cannot handle object mode, but knex forces objectMode (and ignores
-    //       me if I try to pass options {objectMode: false}. So we transform the
-    //       the objects into JSON, and explicitely configure these paramters:
+    //       me if I try to pass options {objectMode: false}). So we transform the
+    //       the objects into JSON, and explicitly configure these parameters:
     readableObjectMode: false,
     writableObjectMode: true,
     transform: function (data, encoding, callback) {

frontend/simple/js/backend/hapi.js

@@ -96,7 +96,7 @@ export class HapiBackend extends Backend {
   }
   publishLogEntry (contractId: string, entry: HashableEntry) {
     console.log(`publishLogEntry to ${contractId}:`, entry)
-    // TODO: There used to be a permission check here buts its duplicated when a subcribed
+    // TODO: There used to be a permission check here buts its duplicated when a subscribed
     // contract received the events
     // in cases like send of messages the check information is not known so this check
     // is better left to the server and the subscribers to perform the check

frontend/simple/js/events.js

@@ -63,12 +63,10 @@ export class GroupContract extends Events.HashableGroup {
       },
       // TODO: remove group profile when leave group is implemented
       HashableGroupSetGroupProfile (state, {data}) {
-        data = JSON.parse(data.json) // TODO: data.json? why not just data? what else is in there?
-        var {groupProfile} = state.profiles[data.username]
-        state.profiles[data.username].groupProfile = _.merge(groupProfile, data)
+        _.merge(state.profiles[data.username].groupProfile, JSON.parse(data.json))
       }
     },
-    // !! IMPORANT!!
+    // !! IMPORTANT!!
     // Actions here MUST NOT modify contract state!
     // They MUST NOT call 'commit'!
     // This is critical to the function of that latest contract hash.

frontend/simple/js/router.js

@@ -10,7 +10,8 @@ import Invite from '../views/Invite.vue'
 import Mailbox from '../views/Mailbox.vue'
 import Join from '../views/Join.vue'
 import Vote from '../views/Vote.vue'
-import PayGroup from '../views/PayGroup.vue'
+import SetContribution from '../views/SetContribution.vue'
+import PayGroupMembers from '../views/PayGroupMembers.vue'
 import Home from '../views/Home.vue'
 import ProposeMember from '../views/ProposeMember.vue'
 import MembersCircle from '../components/MembersCircle.vue'
@@ -122,10 +123,17 @@ var router = new Router({
       }
     },
     {
-      path: '/pay-group',
-      component: PayGroup,
+      path: '/set-contribution',
+      component: SetContribution,
       meta: {
-        title: 'Pay Group'
+        title: 'Set Contribution'
+      }
+    },
+    {
+      path: '/pay-group-members',
+      component: PayGroupMembers,
+      meta: {
+        title: 'Pay Group Members'
       }
     },
     // NOTE: we no longer support ejs pages

frontend/simple/views/GroupDashboard.vue

@@ -22,7 +22,16 @@
         <group-support-history :history="[1.2, 1, .85, .95, 1.05, .35]" />
 
         <group-settings :group="currentGroupState" />
-
+        <div>
+          <a class="button" @click="payGroupMembers">
+            <i18n>Pay Members</i18n>
+          </a>
+        </div>
+        <div>
+          <a class="button" @click="setContribution">
+            <i18n>Set Contribution</i18n>
+          </a>
+        </div>
       </div>
     </div>
   </section>
@@ -56,6 +65,14 @@
       GroupMembers,
       GroupSupportHistory,
       GroupSettings
+    },
+    methods: {
+      setContribution () {
+        this.$router.push({path: '/set-contribution'})
+      },
+      payGroupMembers () {
+        this.$router.push({path: '/pay-group-members'})
+      }
     }
   }
 </script>

frontend/simple/views/NavBar.vue

@@ -19,14 +19,6 @@
           >
             <i18n>Start a Group</i18n>
           </router-link>
-          <router-link
-            active-class="is-active"
-            class="nav-item is-tab"
-            to="pay-group"
-            v-if="$store.state.loggedIn"
-          >
-            <i18n>Pay Group</i18n>
-          </router-link>
           <router-link
             active-class ="is-active"
             class="nav-item"

frontend/simple/views/PayGroupMembers.vue

@@ -0,0 +1,66 @@
+<template>
+  <!-- main containers:
+   .container  http://bulma.io/documentation/layout/container/
+   .content    http://bulma.io/documentation/elements/content/
+   .section    http://bulma.io/documentation/layout/section/
+   .block      base/classes.sass (just adds 20px margin-bottom except for last)
+   -->
+  <section class="section">
+    <div class="columns">
+      <div class="column is-1"></div>
+      <div class="column is-10" >
+
+        <div class="columns is-multiline">
+          <div class="column is-half">
+            <p class="title is-4"><i18n>Needs Payment</i18n></p>
+            <div class="box">
+              <ul>
+                <li v-for="(member, username) in membersToPay">
+                  {{ username }}
+
+                </li>
+              </ul>
+            </div>
+            <p class="title is-4"><i18n>Paid</i18n></p>
+            <div class="box">
+              <ul>
+                <li v-for="(member, username) in paidMembers">
+                  {{ username }}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+  import {mapGetters} from 'vuex'
+
+  const incomeDistribution = require('../js/distribution/mincome-proportional').default
+  export default {
+    name: 'PayGroupMembers',
+    props: {},
+    data () {
+      return {}
+    },
+    computed: {
+      ...mapGetters(['profilesForGroup']),
+      membersToPay () {
+        // TODO: in-progress
+        var members = this.profilesForGroup()
+        var membersDistribution = []
+        console.log('Members Distribution: ', membersDistribution)
+        var incomes = incomeDistribution(membersDistribution, 500) // should be equal with group income baseline
+        console.log('Distributed Incomes: ', incomes)
+        return members
+      },
+      paidMembers () {
+        // TODO: in-progress
+        var members = []
+        return members
+      }
+    }
+  }
+</script>

frontend/simple/views/PayGroup.vue → frontend/simple/views/SetContribution.vue

@@ -14,7 +14,7 @@
           <div class="column is-half">
             <p class="title is-4"><i18n>{{msg}}</i18n></p>
             <div class="box">
-              <p>Mincome: <b>${{minCome}}</b></p>
+              <p>Mincome: <b>${{ currentGroupState.incomeProvided}}</b></p>
               <p>Amount the group received this month: <b>${{amountReceivedThisMonth}}</b></p>
             </div>
             <div class="box">
@@ -56,8 +56,15 @@
   </section>
 </template>
 <script>
+import {mapGetters} from 'vuex'
+
 export default {
-  name: 'PayGroup',
+  name: 'SetContribution',
+  computed: {
+    ...mapGetters([
+      'currentGroupState'
+    ])
+  },
   props: {
     minCome: {type: Number, default: 1000},
     amountReceivedThisMonth: {type: Number, default: 852}

frontend/simple/views/UserProfileView.vue

@@ -101,6 +101,7 @@
                 <span class="select" type="text">
                   <select v-model="editedGroupProfile.paymentMethod">
                     <option></option>
+                    <option>Cash</option>
                     <option>Bitcoin</option>
                     <option>Amex</option>
                     <option>Visa</option>