Payment Implementation

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.prevent="payGroupMembers">
+            <i18n>Pay Members</i18n>
+          </a>
+        </div>
+        <div>
+          <a class="button" @click.prevent="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,73 @@
+<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 () {
+        var members = this.profilesForGroup()
+        var membersDistribution = []
+        const usernames = Object.keys(members)
+        usernames.map(function (username) {
+          membersDistribution.push({
+            name: username,
+            amount: 200 // this should be the contribution which needs to be saved at 'set contribution' page
+          })
+          members[username] = {
+            attrs: members[username]
+          }
+        })
+        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 () {
+        var members = []
+        return members
+      }
+    }
+  }
+</script>

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

@@ -57,7 +57,7 @@
 </template>
 <script>
 export default {
-  name: 'PayGroup',
+  name: 'SetContribution',
   props: {
     minCome: {type: Number, default: 1000},
     amountReceivedThisMonth: {type: Number, default: 852}