vuefilemanager/resources/js/components/Others/PlanPricingTables.vue

<template>
    <div class="plans-wrapper" v-if="plans">
        <article class="plan" v-for="(plan, i) in plans" :key="i">
            <div class="plan-wrapper">
                <header class="plan-header">
                    <div class="icon">
                        <hard-drive-icon class="text-theme" size="26" />
                    </div>
                    <h1 class="title">{{ plan.data.attributes.name }}</h1>
                    <h2 class="description">{{ plan.data.attributes.description }}</h2>
                </header>
                <section class="plan-features">
                    <b class="storage-size">{{ plan.data.attributes.capacity_formatted }}</b>
                    <span class="storage-description">{{ $t('page_pricing_tables.storage_capacity') }}</span>
                </section>
                <footer class="plan-footer">
                    <b class="price text-theme">
                        {{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
                        <small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{ $t('page_pricing_tables.vat_excluded') }}</small>
                    </b>
                    <ButtonBase @click.native="selectPlan(plan)" type="submit" button-style="secondary" class="sign-in-button">
                        {{ $t('global.get_it') }}
                    </ButtonBase>
                </footer>
            </div>
        </article>
    </div>
</template>

<script>
    import ButtonBase from "../FilesView/ButtonBase";
    import {HardDriveIcon} from "vue-feather-icons"
    import { mapGetters } from 'vuex'
    import axios from 'axios'

    export default {
        name: 'PlanPricingTables',
        components: {
            HardDriveIcon,
            ButtonBase,
        },
        props: [
            'customRoute'
        ],
        data() {
            return {
                plans: undefined,
            }
        },
        computed: {
            ...mapGetters(['user']),
        },
        methods: {
            selectPlan(plan) {
                this.$emit('selected-plan', plan)

                let route = this.customRoute ? this.customRoute : 'UpgradeBilling'

                this.$router.push({name: route})
            }
        },
        created() {
            axios.get('/api/pricing')
                .then(response => {
                    this.plans = response.data.filter(plan => {
                        return plan.data.attributes.capacity > this.user.data.attributes.max_storage_amount
                    })
                    this.$emit('load', false)
                })
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../sass/vuefilemanager/variables';
    @import '../../../sass/vuefilemanager/mixins';

    .plan {
        text-align: center;
        flex: 0 0 33%;
        padding: 0 25px;
        margin-bottom: 45px;

        .plan-wrapper {
            box-shadow: 0 7px 20px 5px hsla(220, 36%, 16%, 0.03);
            padding: 25px;
            border-radius: 8px;
            @include transition;

            &:hover {
                @include transform(translateY(-20px) scale(1.05));
                box-shadow: 0 15px 25px 5px hsla(220, 36%, 16%, 0.08);
            }
        }

        .plan-header {

            .icon {
                path, line, polyline, rect, circle {
                    color: inherit;
                }
            }

            .title {
                @include font-size(22);
                font-weight: 800;
            }

            .description {
                @include font-size(14);
                font-weight: 600;
            }
        }

        .plan-features {
            margin: 65px 0;

            .storage-size {
                @include font-size(48);
                font-weight: 900;
                line-height: 1.1;
            }

            .storage-description {
                display: block;
                @include font-size(15);
                font-weight: 800;
            }
        }

        .plan-footer {

            .sign-in-button {
                width: 100%;
                text-align: center;
            }

            .price {
                @include font-size(18);
                display: block;
                margin-bottom: 20px;

                .vat-disclaimer {
                    @include font-size(11);
                    color: $text;
                    display: block;
                    font-weight: 300;
                    opacity: 0.45;
                    margin-top: 5px;
                }
            }
        }
    }

    .plans-wrapper {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -25px;
        justify-content: center;
    }

    @media only screen and (max-width: 960px) {

        .plans-wrapper {
            display: block;
            margin: 0;
        }
    }

    .dark {
        .plan {

            .plan-wrapper {
                background: $dark_mode_foreground;
            }

            .plan-header {

                .title {
                    color: $dark_mode_text_primary;
                }

                .description {
                    color: $dark_mode_text_secondary;
                }
            }

            .plan-features {

                .storage-size {
                    color: $dark_mode_text_primary;
                }

                .storage-description {
                    color: $dark_mode_text_primary;
                }
            }

            .plan-footer {

                .sign-in-button {
                    background: rgba($theme, 0.1);

                    /deep/ .content {
                        color: $theme;
                    }
                }

                .price {

                    .vat-disclaimer {
                        color: $dark_mode_text_primary;
                    }
                }
            }
        }
    }
</style>