loomio/loomio

View on GitHub
vue/src/components/group/trial_banner.vue

Summary

Maintainability
Test Coverage
<script lang="js">
import { differenceInDays, format, parseISO } from 'date-fns';
import Session         from '@/shared/services/session';
import AuthModalMixin      from '@/mixins/auth_modal';
export default
{
  mixins: [ AuthModalMixin ],
  props: {
    group: Object
  },

  methods: {
    signIn() { this.openAuthModal(); }
  },

  computed: {
    isLoggedIn() { return Session.isSignedIn(); },
    isWasGift() {
      return this.group.subscription.plan === 'was-gift';
    },
    isTrialing() {
      return this.group.membersInclude(Session.user()) && (this.group.subscription.plan === 'trial');
    },
    isExpired() {
      return this.isTrialing && !this.group.subscription.active;
    },
    daysRemaining() {
      return differenceInDays(parseISO(this.group.subscription.expires_at), new Date) + 1;
    },
    createdDate() {
      return format(new Date(this.group.createdAt), 'do LLLL yyyy');
    }
  }
};
</script>
<template lang="pug">
v-alert(outlined color="primary" dense v-if="isTrialing")
  .d-flex.align-center
    div.pr-1(v-if="isWasGift")
      span(v-if="isExpired" v-html="$t('current_plan_button.was_gift_expired')")
      span(v-if="!isExpired" v-html="$t('current_plan_button.was_gift_remaining', { days: daysRemaining } )")
      space
      span(v-html="$t('current_plan_button.was_gift_trial', {createdDate: createdDate })")
    div.pr-1(v-if="!isWasGift")
      span(v-if="!isExpired" v-t="{ path: 'current_plan_button.free_trial', args: { days: daysRemaining }}")
      span(v-if="isExpired" v-t="'current_plan_button.trial_expired'")
    v-spacer
    v-btn(
      color="primary"
      :href="'/upgrade/'+group.id"
      target="_blank"
      :title="$t('current_plan_button.tooltip')"
    )
      common-icon(name="mdi-rocket")
      span(v-t="'current_plan_button.view_plans'")
</template>