@@ -6,13 +6,14 @@ | |||
<div class="form-group"> | |||
<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') }" /> | |||
<div v-if="submitted && errors.has('name')" class="invalid-feedback">{{ errors.first('name') }}</div> | |||
</div> | |||
<!-- domain --> | |||
<div v-if="customize.domain === true" class="form-group"> | |||
<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> | |||
<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> | |||
</div> | |||
<div v-if="customize.domain === false"> | |||
@@ -91,11 +92,6 @@ | |||
<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="setPaymentMethod(pm)">{{messages['payment_description_'+pm.paymentMethodType]}}</button> | |||
</span> | |||
@@ -170,7 +166,7 @@ | |||
error: state => state.error | |||
}), | |||
isComplete() { | |||
return (this.name !== '') | |||
return (this.network.name !== '') | |||
&& (this.customize.domain === false || this.network.domain !== '') | |||
&& (this.customize.locale === false || this.network.locale !== '') | |||
&& (this.customize.timezone === false || this.network.timezone !== '') | |||
@@ -1,17 +1,20 @@ | |||
<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> | |||
<script> | |||
@@ -1,7 +1,14 @@ | |||
<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> | |||
</template> | |||
@@ -13,11 +20,12 @@ | |||
data() { | |||
return { | |||
elements: null, | |||
card: null | |||
card: null, | |||
submitted: false | |||
} | |||
}, | |||
computed: { | |||
...mapState('paymentMethods', ['paymentMethod']), | |||
...mapState('paymentMethods', ['paymentMethod', 'paymentStatus', 'paymentInfo']), | |||
...mapState('system', ['messages']), | |||
}, | |||
created () { | |||
@@ -30,8 +38,10 @@ | |||
this.card.mount(this.$refs.card); | |||
}, | |||
methods: { | |||
...mapActions('paymentMethods', ['setPaymentInfo']), | |||
...mapActions('paymentMethods', ['addAccountPaymentMethod']), | |||
authorizeCard(e) { | |||
const comp = this; | |||
console.log('this.errors='+JSON.stringify(this.errors)); | |||
window.stripe.createToken(this.card).then(function(result) { | |||
console.log('authorizedCard: created token='+JSON.stringify(result.token)); | |||
if (result.error) { | |||
@@ -39,6 +49,16 @@ | |||
self.hasCardErrors = true; | |||
self.$forceUpdate(); // Forcing the DOM to update so the Stripe Element can update. | |||
return; | |||
} else { | |||
comp.submitted = true; | |||
comp.addAccountPaymentMethod({ | |||
paymentMethod: { | |||
paymentMethodType: 'credit', | |||
paymentInfo: result.token.id | |||
}, | |||
messages: comp.messages, | |||
errors: comp.errors | |||
}); | |||
} | |||
}); | |||
} | |||