87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<template>
|
|
<div class="p-0" v-if="$resources.subscription.data">
|
|
<ErrorMessage :message="errorMessage" />
|
|
<Plans
|
|
v-if="step === 1"
|
|
:secretKey="secretKey"
|
|
:subscription="$resources.subscription.data"
|
|
:team="$resources.subscription.data.team"
|
|
v-model:step="step"
|
|
v-model:selectedPlan="selectedPlan"
|
|
/>
|
|
<Address
|
|
v-if="step === 2"
|
|
:secretKey="secretKey"
|
|
:currency="$resources.subscription.data.currency"
|
|
:countries="$resources.subscription.data.countries"
|
|
v-model:step="step"
|
|
v-model:newAddress="newAddress"
|
|
/>
|
|
<Payment
|
|
v-if="step === 3"
|
|
:selectedPlan="selectedPlan"
|
|
:currency="$resources.subscription.data.currency"
|
|
:withoutAddress="true"
|
|
:address="
|
|
Object.keys($resources.subscription.data.address).length > 0
|
|
? $resources.subscription.data.address
|
|
: newAddress
|
|
"
|
|
:secretKey="secretKey"
|
|
v-model:step="step"
|
|
/>
|
|
<PlanChangeSuccessful
|
|
v-if="step === 4"
|
|
:selectedPlan="selectedPlan.name"
|
|
:currentPlan="$resources.subscription.data.current_plan"
|
|
v-model:step="step"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Apps from './CheckoutApps.vue';
|
|
import Plans from './CheckoutPlans.vue';
|
|
import Address from './CheckoutAddress.vue';
|
|
import Payment from './CheckoutPayment.vue';
|
|
import PlanChangeSuccessful from './PlanChangeSuccessful.vue';
|
|
|
|
export default {
|
|
name: 'Checkout',
|
|
components: {
|
|
Apps,
|
|
Plans,
|
|
Address,
|
|
Payment,
|
|
PlanChangeSuccessful
|
|
},
|
|
props: ['secretKey'],
|
|
data() {
|
|
return {
|
|
selectedSubscription: '',
|
|
selectedPlan: '',
|
|
step: 1,
|
|
newAddress: {},
|
|
errorMessage: null
|
|
};
|
|
},
|
|
resources: {
|
|
subscription() {
|
|
return {
|
|
url: 'jcloud.api.developer.marketplace.get_subscription',
|
|
params: {
|
|
secret_key: this.secretKey
|
|
},
|
|
auto: true,
|
|
onSuccess(r) {
|
|
this.errorMessage = null;
|
|
},
|
|
onError(e) {
|
|
this.errorMessage = e;
|
|
}
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|