fix payment views and cloud/region selection

src/_helpers/router.js

@@ -18,20 +18,20 @@ import NetworkPage from '../account/NetworkPage'
 import AccountsPage from '../admin/AccountsPage'
 import StripePayment from "../account/payment/StripePayment";
 import InviteCodePayment from "../account/payment/InviteCodePayment";
+import FreePayment from "../account/payment/FreePayment";
 import UnknownPayment from "../account/payment/UnknownPayment";
 import { util } from '../_helpers'
 
 Vue.use(Router);
 
 const newNetworkChildren = [
-  { path: '', component: NewNetworkPage,
-    children: [{
-      'path': '', components: {
-        'stripe': StripePayment,
-        'invite': InviteCodePayment,
-        'unknown': UnknownPayment
-      }
-    }]
+  { path: '', components: {
+      default: NewNetworkPage,
+      pay_stripe: StripePayment,
+      pay_invite: InviteCodePayment,
+      pay_free: FreePayment,
+      pay_unknown: UnknownPayment
+    }
   }
 ];
 

src/_services/paymentMethod.service.js

@@ -26,6 +26,5 @@ function getByAccountAndId(paymentMethodId, messages, errors) {
 }
 
 function addAccountPaymentMethod(paymentMethod, messages, errors) {
-    console.log("pmService: paymentMethod="+JSON.stringify(paymentMethod));
     return fetch(`${config.apiUrl}/me/paymentMethods`, util.putWithAuth(paymentMethod)).then(util.handleCrudResponse(messages, errors));
 }

src/_store/paymentMethods.module.js

@@ -59,7 +59,6 @@ const actions = {
     },
 
     addAccountPaymentMethod({ commit }, {paymentMethod, messages, errors}) {
-        console.log("pmModule: paymentMethod="+JSON.stringify(paymentMethod));
         commit('addAccountPaymentMethodRequest');
         paymentMethodService.addAccountPaymentMethod(paymentMethod, messages, errors)
             .then(

src/account/NewNetworkPage.vue

@@ -103,8 +103,8 @@
             <!-- cloud+region -->
             <div v-if="customize.region === true" class="form-group">
                 <label htmlFor="region">{{messages.field_label_region}}</label>
-                <select name="region" v-validate="'required'" v-if="regions" class="form-control" :class="{ 'is-invalid': submitted && errors.has('region') }">
-                    <option v-for="region in regions" :value="regionId(region)">{{region.name}} (~{{parseInt(region.distance/1000)}} {{messages.msg_km_distance_away}})</option>
+                <select name="region" v-validate="'required'" v-model="cloudRegionUuid" v-if="regions" class="form-control" :class="{ 'is-invalid': submitted && errors.has('region') }">
+                    <option v-for="region in regions" :value="region.uuid">{{region.name}} (~{{parseInt(region.distance/1000)}} {{messages.msg_km_distance_away}})</option>
                 </select>
                 <div v-if="submitted && errors.has('region')" class="invalid-feedback">{{ errors.first('region') }}</div>
                 <button @click="customize.region = false">{{messages.button_label_use_default}}</button>
@@ -115,9 +115,6 @@
                 <span v-else v-html="messages.message_auto_detecting"></span>
                 <button @click="customize.region = true">{{messages.button_label_customize}}</button>
             </div>
-            <div>
-                {{cloudRegion.name}}
-            </div>
             <hr/>
 
             <!-- footprint -->
@@ -138,6 +135,7 @@
             </div>
             <hr/>
 
+            <!-- payment -->
             <div class="form-group">
                 <label htmlFor="paymentMethod">{{messages.field_label_paymentMethod}}</label>
                 <div v-if="typeof paymentMethods === 'undefined' || paymentMethods === null || paymentMethods.length === 0" class="invalid-feedback d-block">
@@ -148,13 +146,20 @@
                 </span>
             </div>
 
-            <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 v-if="selectedPaymentMethod !== null && selectedPaymentMethod.paymentMethodType === 'credit'">
+                <router-view name="pay_stripe" v-if="selectedPaymentMethod.driverClass.endsWith('StripePaymentDriver')"></router-view>
+                <router-view name="pay_unknown" v-else></router-view>
+            </div>
+            <div v-else-if="selectedPaymentMethod !== null && selectedPaymentMethod.paymentMethodType === 'code'">
+                <router-view name="pay_invite" v-if="selectedPaymentMethod.driverClass.endsWith('CodePaymentDriver')"></router-view>
+                <router-view name="pay_unknown" v-else></router-view>
+            </div>
+            <div v-else-if="selectedPaymentMethod !== null && selectedPaymentMethod.paymentMethodType === 'free'">
+                <router-view name="pay_free" v-if="selectedPaymentMethod.driverClass.endsWith('FreePaymentDriver')"></router-view>
+                <router-view name="pay_unknown" v-else></router-view>
             </div>
-            <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 v-else-if="selectedPaymentMethod !== null">
+                <router-view name="pay_unknown"></router-view>
             </div>
             <hr/>
 
@@ -185,14 +190,13 @@
                     locale: '',
                     timezone: '',
                     plan: 'bubble',
-                    region: '',
                     footprint: 'Worldwide',
                     paymentMethodObject: {
                         paymentMethodType: null,
                         paymentInfo: null
                     }
                 },
-                cloudRegion: '',
+                cloudRegionUuid: null,
                 regions: [],
                 customize: {
                     domain: false,
@@ -217,7 +221,8 @@
                 },
                 verifiedContacts: false,
                 anyContacts: false,
-                firstContact: null
+                firstContact: null,
+                selectedPaymentMethod: null
             };
         },
         computed: {
@@ -373,8 +378,14 @@
             tzDescription(tz) {
                 return this.messages['tz_name_'+tz] + " - " + this.messages['tz_description_'+tz]
             },
-            regionId(region) {
-                return region.cloud+':'+region.internalName;
+            findRegion(uuid) {
+                if (this.regions) {
+                    for (let i = 0; i < this.regions.length; i++) {
+                        if (this.regions[i].uuid === uuid) return this.regions[i];
+                    }
+                }
+                console.log('findRegion: uuid not found: '+uuid);
+                return null;
             },
             handleSubmit(e) {
                 this.submitted = true;
@@ -385,7 +396,13 @@
                                 paymentMethodType: this.paymentMethod.paymentMethodType,
                                 paymentInfo: this.paymentInfo
                             };
-                            this.createNewNetwork(this.network);
+                            const cloudRegion = this.findRegion(this.cloudRegionUuid);
+                            if (cloudRegion === null) {
+                                console.log('no region selected');
+                            } else {
+                                console.log('sending create network: ' + JSON.stringify(this.network) + ' cloud/region=' + cloudRegion.cloud + '/' + cloudRegion.internalName);
+                            }
+                            // this.createNewNetwork(this.network);
                         }
                     }
                 });
@@ -413,12 +430,13 @@
             nearestRegions (regions) {
                 if (regions) {
                     this.regions = regions;
-                    if (this.network.region === '') this.network.region = this.regionId(regions[0]);
+                    if (this.cloudRegionUuid === null) this.cloudRegionUuid = regions[0].uuid;
                     if (this.defaults.region === '') this.defaults.region = regions[0];
                 }
             },
             paymentMethod (pm) {
                 if (pm) {
+                    this.selectedPaymentMethod = pm;
                     this.network.paymentMethodObject.paymentMethodType = pm.paymentMethodType;
                     this.network.paymentMethodObject.paymentInfo = null;
                 }
@@ -429,13 +447,11 @@
                 }
             },
             policy (p) {
-                // console.log('watch.policy: received '+JSON.stringify(p));
                 this.anyContacts = this.hasAnyContacts(p);
                 this.verifiedContacts = this.hasVerifiedContact(p);
                 this.firstContact = this.getFirstContact(p);
             },
             actionStatus (status) {
-                // console.log('watch.actionStatus: received: '+JSON.stringify(status));
                 if (status.success) {
                     this.initDefaults();
                 }

src/account/payment/FreePayment.vue

@@ -0,0 +1,45 @@
+<template>
+    <form @submit.prevent="setFreePlay">
+        <div class="form-group">
+            <div v-if="submitted && errors.has('purchase')" class="invalid-feedback d-block">{{ errors.first('purchase') }}</div>
+            <div v-if="submitted && errors.has('paymentMethod')" class="invalid-feedback d-block">{{ errors.first('paymentMethod') }}</div>
+            <div v-if="submitted && errors.has('paymentMethodInfo')" class="invalid-feedback d-block">{{ errors.first('paymentMethodInfo') }}</div>
+            <div v-if="submitted && errors.has('paymentMethodType')" class="invalid-feedback d-block">{{ errors.first('paymentMethodType') }}</div>
+            <div v-if="submitted && errors.has('paymentMethodService')" class="invalid-feedback d-block">{{ errors.first('paymentMethodService') }}</div>
+            <div v-if="submitted && errors.has('paymentInfo')" class="invalid-feedback d-block">{{ errors.first('paymentInfo') }}</div>
+            <button v-if="paymentStatus.addingPaymentMethod || !paymentStatus.addedPaymentMethod" class="btn btn-primary" :disabled="paymentStatus.addingPaymentMethod">{{messages.button_label_submit_free_pay}}</button>
+            <span v-if="paymentStatus.addedPaymentMethod">{{messages.message_verified_free_pay}}</span>
+        </div>
+    </form>
+</template>
+
+<script>
+    import {mapActions, mapState} from 'vuex'
+
+    export default {
+        data() {
+            return {
+                submitted: false
+            };
+        },
+        computed: {
+            ...mapState('paymentMethods', ['paymentMethod', 'paymentStatus', 'paymentInfo']),
+            ...mapState('system', ['messages']),
+        },
+        methods: {
+            ...mapActions('paymentMethods', ['addAccountPaymentMethod']),
+            setFreePlay: function (e) {
+                this.submitted = true;
+                this.errors.clear();
+                this.addAccountPaymentMethod({
+                    paymentMethod: {
+                        paymentMethodType: 'free',
+                        paymentInfo: 'free'
+                    },
+                    messages: this.messages,
+                    errors: this.errors
+                });
+            }
+        }
+    };
+</script>

src/account/payment/InviteCodePayment.vue

@@ -32,7 +32,6 @@
             ...mapState('system', ['messages']),
         },
         created () {
-            console.log('InviteCodePayment.vue: created, paymentMethod='+JSON.stringify(this.paymentMethod));
             if (this.paymentMethod && this.paymentMethod.paymentMethodType === 'code') {
                 this.invite_code = this.paymentInfo;
             }
@@ -40,7 +39,6 @@
         methods: {
             ...mapActions('paymentMethods', ['addAccountPaymentMethod']),
             setInviteCode: function (e) {
-                console.log('setInviteCode: calling setPaymentInfo with invite code: '+this.invite_code);
                 this.submitted = true;
                 this.errors.clear();
                 this.addAccountPaymentMethod({

src/account/payment/UnknownPayment.vue

@@ -1,13 +1,12 @@
 <template>
-    <div>
-        This site is not configured to handle payments of this type
+    <div class="invalid-feedback d-block">
+        <h5>{{messages.message_payment_not_supported}}</h5>
     </div>
 </template>
 
 <script>
+    import { mapState } from 'vuex'
     export default {
-        created () {
-            console.log('UnknownPayment.vue: created, paymentMethod='+JSON.stringify(this.paymentMethod));
-        }
+        computed: { ...mapState('system', ['messages']) }
     };
 </script>