Matteo Pagliazzi
9151690f86
* wip: better group plan cancellation * add cancelation confirm modal * abstract confirm modal for subs * abstract canceled modal for subs * working code * add missing files * fix text and margins * fix(cancel modal): share css and add close icon
94 lines
3.6 KiB
Vue
94 lines
3.6 KiB
Vue
<template lang="pug">
|
|
.row.standard-page(v-if='groupIsSubscribed && isLeader')
|
|
.col-12.col-md-6.offset-md-3
|
|
table.table.alert.alert-info
|
|
tr(v-if='group.purchased.plan.dateTerminated')
|
|
td.alert.alert-warning
|
|
span.noninteractive-button.btn-danger {{ $t('canceledGroupPlan') }}
|
|
i.glyphicon.glyphicon-time {{ $t('groupPlanCanceled') }}
|
|
strong {{dateTerminated}}
|
|
tr(v-if='!group.purchased.plan.dateTerminated')
|
|
td
|
|
h3 {{ $t('paymentDetails') }}
|
|
p(v-if='group.purchased.plan.planId') {{ $t('groupSubscriptionPrice') }}
|
|
tr(v-if='group.purchased.plan.extraMonths')
|
|
td
|
|
span.glyphicon.glyphicon-credit-card
|
|
| {{ $t('purchasedGroupPlanPlanExtraMonths', purchasedGroupPlanPlanExtraMonths) }}
|
|
tr(v-if='group.purchased.plan.consecutive.count || group.purchased.plan.consecutive.offset')
|
|
td
|
|
span.glyphicon.glyphicon-forward
|
|
| {{ $t('consecutiveSubscription') }}
|
|
ul.list-unstyled
|
|
li {{ $t('consecutiveMonths') }} {{group.purchased.plan.consecutive.count + group.purchased.plan.consecutive.offset}}
|
|
li {{ $t('gemCapExtra') }} {{group.purchased.plan.consecutive.gemCapExtra}}
|
|
li {{ $t('mysticHourglasses') }} {{group.purchased.plan.consecutive.trinkets}}
|
|
.col-12.col-md-6.offset-md-3
|
|
button.btn.btn-success(class='btn-success', v-if='group.purchased.plan.dateTerminated', @click='upgradeGroup()')
|
|
| {{ $t('upgrade') }}
|
|
.btn.btn-primary(v-if='!group.purchased.plan.dateTerminated && group.purchased.plan.paymentMethod === "Stripe"',
|
|
@click='showStripeEdit({groupId: group.id})') {{ $t('subUpdateCard') }}
|
|
.btn.btn-sm.btn-danger(v-if='!group.purchased.plan.dateTerminated',
|
|
@click='cancelSubscriptionConfirm({group: group})') {{ $t('cancelGroupSub') }}
|
|
</template>
|
|
|
|
<script>
|
|
import moment from 'moment';
|
|
import { mapState } from 'client/libs/store';
|
|
import paymentsMixin from 'client/mixins/payments';
|
|
import { CONSTANTS, getLocalSetting, removeLocalSetting } from 'client/libs/userlocalManager';
|
|
|
|
export default {
|
|
mixins: [paymentsMixin],
|
|
props: ['groupId'],
|
|
data () {
|
|
return {
|
|
group: {},
|
|
};
|
|
},
|
|
async mounted () {
|
|
await this.loadGroup();
|
|
|
|
let appState = getLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
|
|
if (appState) {
|
|
appState = JSON.parse(appState);
|
|
if (appState.groupPlanCanceled) {
|
|
removeLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
|
|
this.$root.$emit('habitica:subscription-canceled', {
|
|
dateTerminated: this.dateTerminated,
|
|
isGroup: true,
|
|
});
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({user: 'user.data'}),
|
|
isLeader () {
|
|
return this.user._id === this.group.leader._id;
|
|
},
|
|
groupIsSubscribed () {
|
|
return this.group.purchased && this.group.purchased.plan && this.group.purchased.plan.customerId;
|
|
},
|
|
dateTerminated () {
|
|
if (!this.user.preferences || !this.user.preferences.dateFormat) return moment(this.group.purchased.plan.dateTerminated);
|
|
return moment(this.group.purchased.plan.dateTerminated).format(this.user.preferences.dateFormat.toUpperCase());
|
|
},
|
|
purchasedGroupPlanPlanExtraMonths () {
|
|
return {
|
|
months: parseFloat(this.group.purchased.plan.extraMonths).toFixed(2),
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
async loadGroup () {
|
|
let group = await this.$store.dispatch('guilds:getGroup', {groupId: this.groupId});
|
|
this.group = Object.assign({}, group);
|
|
},
|
|
upgradeGroup () {
|
|
this.$store.state.upgradingGroup = this.group;
|
|
this.$router.push('/group-plans');
|
|
},
|
|
},
|
|
};
|
|
</script>
|