WIP. getting payment views to work

src/_helpers/router.js

@@ -9,10 +9,25 @@ import NetworksPage from '../account/NetworksPage'
 import NewNetworkPage from '../account/NewNetworkPage'
 import NetworkPage from '../account/NetworkPage'
 import AccountsPage from '../admin/AccountsPage'
+import StripePayment from "../account/payment/StripePayment";
+import InviteCodePayment from "../account/payment/InviteCodePayment";
+import UnknownPayment from "../account/payment/UnknownPayment";
 import { currentUser } from '../_helpers'
 
 Vue.use(Router);
 
+const newNetworkChildren = [
+  { path: '', component: NewNetworkPage,
+    children: [{
+      'path': '', components: {
+        'stripe': StripePayment,
+        'invite': InviteCodePayment,
+        'unknown': UnknownPayment
+      }
+    }]
+  },
+];
+
 export const router = new Router({
   mode: 'history',
   routes: [
@@ -21,18 +36,21 @@ export const router = new Router({
       children: [
         {
           path: '', component: NetworksPage,
-          children: [
-            { path: '', component: NewNetworkPage },
-          ]
+          children: newNetworkChildren
         },
         { path: '/profile', component: ProfilePage },
         {
           path: '/networks', component: NetworksPage ,
           children: [
-            { path: '', component: NewNetworkPage },
+            {
+              path: '', component: NewNetworkPage,
+              children: newNetworkChildren
+            },
           ]
         },
-        { path: '/networks/new', component: NewNetworkPage },
+        { path: '/networks/new', component: NewNetworkPage,
+          children: newNetworkChildren
+        },
         { path: '/networks/:uuid', component: NetworkPage }
       ]
     },

src/_store/paymentMethods.module.js

@@ -4,7 +4,8 @@ const state = {
     loading: null,
     error: null,
     paymentMethods: null,
-    paymentMethod: null
+    paymentMethod: null,
+    paymentInfo: null
 };
 
 const actions = {
@@ -17,13 +18,24 @@ const actions = {
             );
     },
 
-    getByUuid({ commit }, uuid) {
+    getById({ commit }, uuid) {
         commit('getByUuidRequest');
         paymentMethodService.getById(uuid)
             .then(
                 paymentMethod => commit('getByUuidSuccess', paymentMethod),
                 error => commit('getByUuidFailure', error)
             );
+    },
+
+    setPaymentMethod({ commit }, pm) {
+        console.log('setPaymentMethod: setting: '+JSON.stringify(pm));
+        commit('setPaymentMethodSuccess', pm);
+    },
+    setPaymentInfo({ commit }, info) {
+        commit('setPaymentInfoSuccess', info);
+    },
+    clearPaymentInfo({ commit }) {
+        commit('clearPaymentInfoSuccess');
     }
 };
 
@@ -49,6 +61,15 @@ const mutations = {
     getByUuidFailure(state, error) {
         state.loading = false;
         state.error = { error };
+    },
+    setPaymentMethodSuccess(state, pm) {
+        state.paymentMethod = pm;
+    },
+    setPaymentInfoSuccess(state, info) {
+        state.paymentInfo = info;
+    },
+    clearPaymentInfoSuccess(state) {
+        state.paymentInfo = null;
     }
 };
 
@@ -57,4 +78,4 @@ export const paymentMethods = {
     state,
     actions,
     mutations
-};
+};

src/account/NewNetworkPage.vue

@@ -42,14 +42,17 @@
                 <div v-if="submitted && errors.has('paymentMethodService')" class="invalid-feedback">{{ errors.first('paymentMethodService') }}</div>
                 <div v-if="submitted && errors.has('paymentInfo')" class="invalid-feedback">{{ errors.first('paymentInfo') }}</div>
                 <span v-for="pm in paymentMethods">
-                    <button class="btn btn-primary" :disabled="status.creating" @click="network.paymentMethodObject.paymentMethodType = pm.paymentMethodType">{{messages['payment_description_'+pm.paymentMethodType]}}</button>
+                    <button class="btn btn-primary" :disabled="status.creating" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button>
                 </span>
             </div>
-            <div v-if="network.paymentMethodObject.paymentMethodType === 'credit'">
-                credit selected
+
+            <div v-if="paymentMethod && paymentMethod.paymentMethodType === 'credit'">
+                <router-view name="stripe" v-if="paymentMethod.driverClass.endsWith('StripePaymentDriver')"></router-view>
+                <router-view name="unknown" v-else></router-view>
             </div>
-            <div v-if="network.paymentMethodObject.paymentMethodType === 'code'">
-                invite code selected
+            <div v-if="paymentMethod && paymentMethod.paymentMethodType === 'code'">
+                <router-view name="invite" v-if="paymentMethod.driverClass.endsWith('CodePaymentDriver')"></router-view>
+                <router-view name="unknown" v-else></router-view>
             </div>
 
             <div class="form-group">
@@ -90,7 +93,7 @@
             ...mapState('domains', ['domains']),
             ...mapState('plans', ['plans']),
             ...mapState('footprints', ['footprints']),
-            ...mapState('paymentMethods', ['paymentMethods']),
+            ...mapState('paymentMethods', ['paymentMethods', 'paymentMethod', 'paymentInfo']),
             ...mapState('networks', {
                 creating: state => state.loading,
                 error: state => state.error
@@ -146,13 +149,24 @@
                 loadFootprints: 'getAll'
             }),
             ...mapActions('paymentMethods', {
-                loadPaymentMethods: 'getAll'
+                loadPaymentMethods: 'getAll',
+                setPaymentMethod: 'setPaymentMethod'
             }),
             handleSubmit(e) {
                 this.submitted = true;
                 this.$validator.validate().then(valid => {
                     if (valid) {
-                        this.createNewNetwork(this.network);
+                        if (this.paymentInfo) {
+                            this.network.paymentMethodObject = {
+                                paymentMethodType: this.paymentMethod.paymentMethodType,
+                                paymentInfo: this.paymentInfo
+                            };
+                            this.createNewNetwork(this.network);
+                        }
+                    } else {
+                        console.log('handleSubmit: no payment info found');
+                        // console.log('handleSubmit: paymentMethod='+JSON.stringify(this.paymentMethod));
+                        if (this.paymentMethod) console.log('handleSubmit: paymentMethod.driverClass='+JSON.stringify(this.paymentMethod.driverClass));
                     }
                 });
             }

src/account/payment/InviteCodePayment.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        Invite Code payment view with method={{JSON.stringify(paymentMethod)}}
+        <form @submit.prevent="setInviteCode">
+            <div class="form-group">
+                <label for="invite_code">{{messages.field_payment_invite_code}}</label>
+                <input type="text" v-model="invite_code" v-validate="'required'" name="invite_code" class="form-control" :class="{ 'is-invalid': submitted && errors.has('purchase') }" />
+                <div v-if="submitted && errors.has('purchase')" class="invalid-feedback">{{ errors.first('purchase') }}</div>
+            </div>
+            <div class="form-group">
+                <button class="btn btn-primary" :disabled="status.submitted">{{messages.button_label_submit_invite_code}}</button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import {mapActions, mapState} from 'vuex'
+
+    export default {
+        data() {
+            return {
+                invite_code: null,
+                submitted: false,
+                accepted: false
+            };
+        },
+        computed: {
+            ...mapState('paymentMethods', ['paymentMethod']),
+        },
+        created () {
+            console.log('InviteCodePayment.vue: created, paymentMethod='+JSON.stringify(this.paymentMethod));
+        },
+        methods: {
+            ...mapActions('paymentMethods', ['setPaymentInfo']),
+            setInviteCode: function (e) {
+                console.log('setInviteCode: calling setPaymentInfo with invite code: '+this.invite_code);
+                this.setPaymentInfo(this.invite_code);
+            }
+        }
+    };
+</script>

src/account/payment/StripePayment.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        Stripe payment view with method={{JSON.stringify(paymentMethod)}}
+    </div>
+</template>
+
+<script>
+    import { mapState, mapActions } from 'vuex'
+    import {paymentMethods} from "../../_store/paymentMethods.module";
+
+    export default {
+        computed: {
+            ...mapState('paymentMethods', ['paymentMethod']),
+        },
+        created () {
+            console.log('StripePayment.vue: created, paymentMethod='+JSON.stringify(this.paymentMethod));
+        },
+        methods: {
+            ...mapActions('paymentMethods', ['setPaymentInfo'])
+        }
+    };
+</script>

src/account/payment/UnknownPayment.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        This site is not configured to handle payments of this type
+    </div>
+</template>
+
+<script>
+    export default {
+        created () {
+            console.log('UnknownPayment.vue: created, paymentMethod='+JSON.stringify(this.paymentMethod));
+        }
+    };
+</script>