@@ -6,13 +6,14 @@ | |||||
<div class="form-group"> | <div class="form-group"> | ||||
<label for="name">{{messages.field_label_network_name}}</label> | <label for="name">{{messages.field_label_network_name}}</label> | ||||
<input type="text" v-model="network.name" v-validate="'required'" name="name" class="form-control" :class="{ 'is-invalid': submitted && errors.has('name') }" /> | <input type="text" v-model="network.name" v-validate="'required'" name="name" class="form-control" :class="{ 'is-invalid': submitted && errors.has('name') }" /> | ||||
<div v-if="submitted && errors.has('name')" class="invalid-feedback">{{ errors.first('name') }}</div> | |||||
</div> | </div> | ||||
<!-- domain --> | <!-- domain --> | ||||
<div v-if="customize.domain === true" class="form-group"> | <div v-if="customize.domain === true" class="form-group"> | ||||
<label for="domain">{{messages.field_label_network_domain}}</label> | <label for="domain">{{messages.field_label_network_domain}}</label> | ||||
<v-select v-validate="'required'" v-if="domains" :options="domains" label="name" type="text" v-model="network.domain" name="domain" class="form-control" :class="{ 'is-invalid': submitted && errors.has('domain') }"></v-select> | <v-select v-validate="'required'" v-if="domains" :options="domains" label="name" type="text" v-model="network.domain" name="domain" class="form-control" :class="{ 'is-invalid': submitted && errors.has('domain') }"></v-select> | ||||
<div v-if="submitted && errors.has('name')" class="invalid-feedback">{{ errors.first('name') }}</div> | |||||
<div v-if="submitted && errors.has('domain')" class="invalid-feedback">{{ errors.first('domain') }}</div> | |||||
<button @click="customize.domain = false">{{messages.button_label_use_default}}</button> | <button @click="customize.domain = false">{{messages.button_label_use_default}}</button> | ||||
</div> | </div> | ||||
<div v-if="customize.domain === false"> | <div v-if="customize.domain === false"> | ||||
@@ -91,11 +92,6 @@ | |||||
<div class="form-group"> | <div class="form-group"> | ||||
<label htmlFor="paymentMethod">{{messages.field_label_paymentMethod}}</label> | <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"> | <span v-for="pm in paymentMethods"> | ||||
<button class="btn btn-primary" :disabled="status.creating" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button> | <button class="btn btn-primary" :disabled="status.creating" @click="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button> | ||||
</span> | </span> | ||||
@@ -170,7 +166,7 @@ | |||||
error: state => state.error | error: state => state.error | ||||
}), | }), | ||||
isComplete() { | isComplete() { | ||||
return (this.name !== '') | |||||
return (this.network.name !== '') | |||||
&& (this.customize.domain === false || this.network.domain !== '') | && (this.customize.domain === false || this.network.domain !== '') | ||||
&& (this.customize.locale === false || this.network.locale !== '') | && (this.customize.locale === false || this.network.locale !== '') | ||||
&& (this.customize.timezone === false || this.network.timezone !== '') | && (this.customize.timezone === false || this.network.timezone !== '') | ||||
@@ -1,17 +1,20 @@ | |||||
<template> | <template> | ||||
<div> | |||||
<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') }" :disabled="paymentStatus.addingPaymentMethod || paymentStatus.addedPaymentMethod" /> | |||||
<div v-if="submitted && errors.has('purchase')" class="invalid-feedback">{{ errors.first('purchase') }}</div> | |||||
</div> | |||||
<div class="form-group"> | |||||
<button v-if="paymentStatus.addingPaymentMethod || !paymentStatus.addedPaymentMethod" class="btn btn-primary" :disabled="paymentStatus.addingPaymentMethod">{{messages.button_label_submit_invite_code}}</button> | |||||
<span v-if="paymentStatus.addedPaymentMethod">{{messages.message_verified_invite_code}}</span> | |||||
</div> | |||||
</form> | |||||
</div> | |||||
<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') }" :disabled="paymentStatus.addingPaymentMethod || paymentStatus.addedPaymentMethod" /> | |||||
<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> | |||||
</div> | |||||
<div class="form-group"> | |||||
<button v-if="paymentStatus.addingPaymentMethod || !paymentStatus.addedPaymentMethod" class="btn btn-primary" :disabled="paymentStatus.addingPaymentMethod">{{messages.button_label_submit_invite_code}}</button> | |||||
<span v-if="paymentStatus.addedPaymentMethod">{{messages.message_verified_invite_code}}</span> | |||||
</div> | |||||
</form> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
@@ -1,7 +1,14 @@ | |||||
<template> | <template> | ||||
<div> | |||||
<div ref="card"></div> | |||||
<button v-on:click="authorizeCard">{{messages.button_label_submit_card}}</button> | |||||
<div class="form-group"> | |||||
<div class="form-control" ref="card"></div> | |||||
<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" @click="authorizeCard" class="btn btn-primary" :disabled="paymentStatus.addingPaymentMethod">{{messages.button_label_submit_card}}</button> | |||||
<span v-if="paymentStatus.addedPaymentMethod">{{messages.message_verified_card}}</span> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -13,11 +20,12 @@ | |||||
data() { | data() { | ||||
return { | return { | ||||
elements: null, | elements: null, | ||||
card: null | |||||
card: null, | |||||
submitted: false | |||||
} | } | ||||
}, | }, | ||||
computed: { | computed: { | ||||
...mapState('paymentMethods', ['paymentMethod']), | |||||
...mapState('paymentMethods', ['paymentMethod', 'paymentStatus', 'paymentInfo']), | |||||
...mapState('system', ['messages']), | ...mapState('system', ['messages']), | ||||
}, | }, | ||||
created () { | created () { | ||||
@@ -30,8 +38,10 @@ | |||||
this.card.mount(this.$refs.card); | this.card.mount(this.$refs.card); | ||||
}, | }, | ||||
methods: { | methods: { | ||||
...mapActions('paymentMethods', ['setPaymentInfo']), | |||||
...mapActions('paymentMethods', ['addAccountPaymentMethod']), | |||||
authorizeCard(e) { | authorizeCard(e) { | ||||
const comp = this; | |||||
console.log('this.errors='+JSON.stringify(this.errors)); | |||||
window.stripe.createToken(this.card).then(function(result) { | window.stripe.createToken(this.card).then(function(result) { | ||||
console.log('authorizedCard: created token='+JSON.stringify(result.token)); | console.log('authorizedCard: created token='+JSON.stringify(result.token)); | ||||
if (result.error) { | if (result.error) { | ||||
@@ -39,6 +49,16 @@ | |||||
self.hasCardErrors = true; | self.hasCardErrors = true; | ||||
self.$forceUpdate(); // Forcing the DOM to update so the Stripe Element can update. | self.$forceUpdate(); // Forcing the DOM to update so the Stripe Element can update. | ||||
return; | return; | ||||
} else { | |||||
comp.submitted = true; | |||||
comp.addAccountPaymentMethod({ | |||||
paymentMethod: { | |||||
paymentMethodType: 'credit', | |||||
paymentInfo: result.token.id | |||||
}, | |||||
messages: comp.messages, | |||||
errors: comp.errors | |||||
}); | |||||
} | } | ||||
}); | }); | ||||
} | } | ||||