WIP. adding support for payments

src/_helpers/router.js

@@ -19,9 +19,19 @@ export const router = new Router({
     {
       path: '/', component: HomePage,
       children: [
-        { path: '', component: NetworksPage },
+        {
+          path: '', component: NetworksPage,
+          children: [
+            { path: '', component: NewNetworkPage },
+          ]
+        },
         { path: '/profile', component: ProfilePage },
-        { path: '/networks', component: NetworksPage },
+        {
+          path: '/networks', component: NetworksPage ,
+          children: [
+            { path: '', component: NewNetworkPage },
+          ]
+        },
         { path: '/networks/new', component: NewNetworkPage },
         { path: '/networks/:uuid', component: NetworkPage }
       ]

src/_services/index.js

@@ -3,5 +3,6 @@ export * from './user.service';
 export * from './domain.service';
 export * from './plan.service';
 export * from './footprint.service';
+export * from './paymentMethod.service';
 export * from './accountPlan.service';
 export * from './network.service';

src/_services/paymentMethod.service.js

@@ -0,0 +1,15 @@
+import config from 'config';
+import { getWithAuth, handleCrudResponse } from '../_helpers';
+
+export const paymentMethodService = {
+    getAll,
+    getById
+};
+
+function getAll() {
+    return fetch(`${config.apiUrl}/paymentMethods`, getWithAuth()).then(handleCrudResponse);
+}
+
+function getById(paymentMethodId) {
+    return fetch(`${config.apiUrl}/paymentMethods/${paymentMethodId}`, getWithAuth()).then(handleCrudResponse);
+}

src/_store/account.module.js

@@ -37,7 +37,7 @@ const actions = {
                     router.push('/');
                     setTimeout(() => {
                         // display success message after route change completes
-                        dispatch('alert/success', 'Registration successful', { root: true });
+                        dispatch('alert/success', messages.alert_registration_success, { root: true });
                     })
                 },
                 error => {

src/_store/index.js

@@ -8,6 +8,7 @@ import { users } from './users.module';
 import { plans } from './plans.module';
 import { footprints } from './footprints.module';
 import { domains } from './domains.module';
+import { paymentMethods } from './paymentMethods.module';
 import { accountPlans } from './accountPlans.module';
 import { networks } from './networks.module';
 
@@ -19,9 +20,10 @@ export const store = new Vuex.Store({
         system,
         account,
         users,
-        domains,
         plans,
         footprints,
+        domains,
+        paymentMethods,
         accountPlans,
         networks
     }

src/_store/paymentMethods.module.js

@@ -0,0 +1,60 @@
+import { paymentMethodService } from '../_services';
+
+const state = {
+    loading: null,
+    error: null,
+    paymentMethods: null,
+    paymentMethod: null
+};
+
+const actions = {
+    getAll({ commit }) {
+        commit('getAllRequest');
+        paymentMethodService.getAll()
+            .then(
+                paymentMethods => commit('getAllSuccess', paymentMethods),
+                error => commit('getAllFailure', error)
+            );
+    },
+
+    getByUuid({ commit }, uuid) {
+        commit('getByUuidRequest');
+        paymentMethodService.getById(uuid)
+            .then(
+                paymentMethod => commit('getByUuidSuccess', paymentMethod),
+                error => commit('getByUuidFailure', error)
+            );
+    }
+};
+
+const mutations = {
+    getAllRequest(state) {
+        state.loading = true;
+    },
+    getAllSuccess(state, paymentMethods) {
+        state.loading = false;
+        state.paymentMethods = paymentMethods;
+    },
+    getAllFailure(state, error) {
+        state.loading = false;
+        state.error = { error };
+    },
+    getByUuidRequest(state) {
+        state.loading = true;
+    },
+    getByUuidSuccess(state, paymentMethod) {
+        state.loading = false;
+        state.paymentMethod = paymentMethod;
+    },
+    getByUuidFailure(state, error) {
+        state.loading = false;
+        state.error = { error };
+    }
+};
+
+export const paymentMethods = {
+    namespaced: true,
+    state,
+    actions,
+    mutations
+};

src/_store/system.module.js

@@ -2,7 +2,8 @@ import { systemService } from '../_services';
 
 const state = {
     configs: {
-        allowRegistration: null
+        allowRegistration: null,
+        paymentsEnabled: true
     },
     messages: {},
     countries: [],

src/account/NetworksPage.vue

@@ -1,11 +1,8 @@
 <template>
     <div>
         <em v-if="loading">{{messages.loading_networks}}</em>
-        <h2>{{messages.table_title_networks}}</h2>
-        <div v-if="!networks || networks.length === 0">
-            {{messages.empty_networks}}
-        </div>
         <div v-if="networks && networks.length > 0">
+            <h2>{{messages.table_title_networks}}</h2>
             <table border="1">
                 <thead>
                 <tr>
@@ -31,9 +28,15 @@
                 </tr>
                 </tbody>
             </table>
+            <hr/>
+            <router-link to="/networks/new">{{messages.button_label_new_network}}</router-link>
+        </div>
+
+        <div v-if="!networks || networks.length === 0">
+            {{messages.empty_networks}}
+            <router-view></router-view>
         </div>
-        <hr/>
-        <router-link to="/networks/new">{{messages.button_label_new_network}}</router-link>
+
     </div>
 </template>
 

src/account/NewNetworkPage.vue

@@ -34,6 +34,24 @@
                     {{messages['footprint_description_'+network.footprint]}}
                 </div>
             </div>
+            <div class="form-group">
+                <label htmlFor="paymentMethod">{{messages.field_label_paymentMethod}}</label>
+                <div v-if="submitted && errors.has('paymentMethod')" class="invalid-feedback">{{ errors.first('paymentMethod') }}</div>
+                <div v-if="submitted && errors.has('paymentMethodInfo')" class="invalid-feedback">{{ errors.first('paymentMethodInfo') }}</div>
+                <div v-if="submitted && errors.has('paymentMethodType')" class="invalid-feedback">{{ errors.first('paymentMethodType') }}</div>
+                <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>
+                </span>
+            </div>
+            <div v-if="network.paymentMethodObject.paymentMethodType === 'credit'">
+                credit selected
+            </div>
+            <div v-if="network.paymentMethodObject.paymentMethodType === 'code'">
+                invite code selected
+            </div>
+
             <div class="form-group">
                 <button class="btn btn-primary" :disabled="status.creating">{{messages.button_label_create_new_network}}</button>
                 <img v-show="status.creating" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
@@ -56,7 +74,11 @@
                     locale: 'en_US',
                     timezone: '',
                     plan: 'bubble',
-                    footprint: 'Worldwide'
+                    footprint: 'Worldwide',
+                    paymentMethodObject: {
+                        paymentMethodType: null,
+                        paymentInfo: null
+                    }
                 },
                 user: currentUser(),
                 submitted: false,
@@ -68,6 +90,7 @@
             ...mapState('domains', ['domains']),
             ...mapState('plans', ['plans']),
             ...mapState('footprints', ['footprints']),
+            ...mapState('paymentMethods', ['paymentMethods']),
             ...mapState('networks', {
                 creating: state => state.loading,
                 error: state => state.error
@@ -122,6 +145,9 @@
             ...mapActions('footprints', {
                 loadFootprints: 'getAll'
             }),
+            ...mapActions('paymentMethods', {
+                loadPaymentMethods: 'getAll'
+            }),
             handleSubmit(e) {
                 this.submitted = true;
                 this.$validator.validate().then(valid => {
@@ -135,6 +161,7 @@
             this.loadDomains(currentUser().uuid);
             this.loadPlans();
             this.loadFootprints();
+            this.loadPaymentMethods();
         }
     };
 </script>