osb/spark/resources/assets/js/mixins/plans.js

/*
 * This mixin is primarily used to share code for the "interval" selector
 * on the registration and subscription screens, which is used to show
 * all of the various subscription plans offered by the application.
 */
module.exports = {
    data() {
        return {
            selectedPlan: null,
            detailingPlan: null,

            showingMonthlyPlans: true,
            showingYearlyPlans: false
        };
    },


    methods: {
        /**
         * Switch to showing monthly plans.
         */
        showMonthlyPlans() {
            this.showingMonthlyPlans = true;

            this.showingYearlyPlans = false;
        },


        /**
         * Switch to showing yearly plans.
         */
        showYearlyPlans() {
            this.showingMonthlyPlans = false;

            this.showingYearlyPlans = true;
        },


        /**
         * Show the plan details for the given plan.
         */
        showPlanDetails(plan) {
            this.detailingPlan = plan;

            $('#modal-plan-details').modal('show');
        }
    },


    computed: {
        /**
         * Get the active "interval" being displayed.
         */
        activeInterval() {
            return this.showingMonthlyPlans ? 'monthly' : 'yearly';
        },


        /**
         * Get all of the plans for the active interval.
         */
        plansForActiveInterval() {
            return _.filter(this.plans, plan => {
                return plan.active && (plan.price == 0 || plan.interval == this.activeInterval);
            });
        },


        /**
         * Get all of the paid plans.
         */
        paidPlans() {
            return _.filter(this.plans, plan => {
                return plan.active && plan.price > 0;
            });
        },


        /**
         * Get all of the paid plans for the active interval.
         */
        paidPlansForActiveInterval() {
            return _.filter(this.plansForActiveInterval, plan => {
                return plan.active && plan.price > 0;
            });
        },


        /**
         * Determine if both monthly and yearly plans are available.
         */
        hasMonthlyAndYearlyPlans() {
            return this.monthlyPlans.length > 0 && this.yearlyPlans.length > 0;
        },

        /**
         * Determine if both monthly and yearly plans are available.
         */
        hasMonthlyAndYearlyPaidPlans() {
            return _.where(this.paidPlans, {interval: 'monthly'}).length > 0 &&
                   _.where(this.paidPlans, {interval: 'yearly'}).length > 0;
        },


        /**
         * Determine if only yearly plans are available.
         */
        onlyHasYearlyPlans() {
            return this.monthlyPlans.length == 0 && this.yearlyPlans.length > 0;
        },

        /**
         * Determine if both monthly and yearly plans are available.
         */
        onlyHasYearlyPaidPlans() {
            return _.where(this.paidPlans, {interval: 'monthly'}).length == 0 &&
                   _.where(this.paidPlans, {interval: 'yearly'}).length > 0;
        },


        /**
         * Get all of the monthly plans.
         */
        monthlyPlans() {
            return _.filter(this.plans, plan => {
                return plan.active && plan.interval == 'monthly';
            });
        },


        /**
         * Get all of the yearly plans.
         */
        yearlyPlans() {
            return _.filter(this.plans, plan => {
                return plan.active && plan.interval == 'yearly';
            });
        }
    }
};