subscription detail page

This commit is contained in:
Čarodej
2021-11-24 10:31:37 +01:00
parent 913bdf70ad
commit 7fe576ba26
8 changed files with 562 additions and 1817 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="progress-wrapper"> <div class="progress-wrapper">
<div class="chart"> <div class="chart rounded">
<div v-for="(chart, i) in data" :key="i" :style="{width: chart.progress + '%'}" class="chart-wrapper"> <div v-for="(chart, i) in data" :key="i" :style="{width: chart.progress + '%'}" class="chart-wrapper">
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />--> <!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
<span :class="['chart-progress', chart.color]"></span> <span :class="['chart-progress', chart.color]"></span>
</div> </div>
</div> </div>
<footer> <footer>
<DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" /> <DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" v-if="chart && chart.title" />
</footer> </footer>
</div> </div>
</template> </template>
@@ -35,6 +35,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 14px; margin-bottom: 14px;
background: #e1e1ef;
.chart-wrapper { .chart-wrapper {

View File

@@ -1,114 +1,122 @@
<template> <template>
<PageTab :is-loading="isLoading" class="form-fixed-width"> <PageTab :is-loading="isLoading">
<PageTabGroup v-if="subscription && !isLoading"> <div v-if="subscription" class="card shadow-card">
<FormLabel> <div class="md:flex md:space-x-10 mb-8">
{{ $t('user_subscription.title') }} <div class="md:mb-0 mb-6">
</FormLabel> <b class="block leading-5 text-lg">
{{ status }}
</b>
<small class="text-gray-500">
{{ $t('We will send you a notification upon Subscription expiration') }}
</small>
</div>
<div>
<b class="block leading-5 text-lg">
{{ price }}
</b>
<small class="text-gray-500">
{{ subscription.relationships.plan.data.attributes.name }}
</small>
</div>
</div>
<!--Info about active subscription--> <div v-for="(limit, i) in limitations" :key="i" class="mb-6">
<div v-if="! subscription.attributes.canceled" class="state active"> <b class="mb-3 block text-sm text-gray-400">
<ListInfo class="list-info"> {{ limit.message }}
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" </b>
:content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/> <ProgressLine :data="limit.distribution" />
<ListInfoItem class="list-item" :title="$t('user_subscription.billed')" :content="$t('admin_page_user.subscription.interval_mo')"/> </div>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/> </div>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.created_at')" :content="subscription.attributes.created_at"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.renews_at')" :content="subscription.attributes.ends_at"/>
</ListInfo>
</div>
<!--Info about canceled subscription--> <div v-if="! subscription && !isLoading" class="card shadow-card">
<div v-if="subscription.attributes.canceled" class="state canceled"> <InfoBox style="margin-bottom: 0">
<ListInfo class="list-info"> <p>{{ $t("User don't have any subscription") }}</p>
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.attributes.name + ' - ' + subscription.attributes.capacity_formatted"/> </InfoBox>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/> </div>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.attributes.canceled_at"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.attributes.ends_at"/>
</ListInfo>
</div>
</PageTabGroup>
<PageTabGroup v-if="! subscription && !isLoading">
<InfoBox>
<p>{{ $t('admin_page_user.subscription.empty') }}</p>
</InfoBox>
</PageTabGroup>
</PageTab> </PageTab>
</template> </template>
<script> <script>
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
import ListInfoItem from '/resources/js/components/Others/ListInfoItem'
import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase' import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import PageTab from '/resources/js/components/Others/Layout/PageTab' import ProgressLine from "../../../../components/Admin/ProgressLine"
import InfoBox from '/resources/js/components/Others/Forms/InfoBox' import PageTab from '/resources/js/components/Others/Layout/PageTab'
import ListInfo from '/resources/js/components/Others/ListInfo' import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import {ExternalLinkIcon} from "vue-feather-icons" import axios from 'axios'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import axios from 'axios'
export default { export default {
name: 'UserSubscription', name: 'UserSubscription',
components: { props: [
ExternalLinkIcon, 'user'
DatatableWrapper, ],
ListInfoItem, components: {
PageTabGroup, ProgressLine,
ButtonBase, ButtonBase,
FormLabel, InfoBox,
ListInfo, PageTab,
InfoBox, },
PageTab, computed: {
}, status() {
computed: { return {
status() { 'active': `Active until ${this.subscription.attributes.renews_at}`,
if (this.subscription.attributes.incomplete) { 'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
return this.$t('global.incomplete') }[this.subscription.attributes.status]
} },
if (this.subscription.attributes.canceled) { price() {
return this.$t('global.canceled') return {
} 'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
if (this.subscription.attributes.active) { 'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
return this.$t('global.active') }[this.subscription.relationships.plan.data.attributes.interval]
} },
} },
}, data() {
data() { return {
return { subscription: undefined,
subscription: undefined, isLoading: true,
isLoading: true, limitations: [],
} }
}, },
created() { created() {
axios.get('/api/admin/users/' + this.$route.params.id + '/subscription') axios.get(`/api/subscription/users/${this.$route.params.id}/subscription`)
.then(response => { .then(response => {
this.subscription = response.data.data this.subscription = response.data.data
this.isLoading = false
}).catch(error => { Object
if (error.response.status == 404) { .entries(this.user.data.meta.limitations)
this.isLoading = false .map(([key, item]) => {
}
}) let payload = {
} color: {
} 'max_storage_amount': 'warning',
'max_team_members': 'purple',
},
message: {
'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
'max_team_members': `Total ${item.use} of ${item.total} Members`,
},
title: {
'max_storage_amount': `Storage`,
'max_team_members': `Team Members`,
}
}
this.limitations.push({
message: payload.message[key],
distribution: [
{
progress: item.percentage,
color: payload.color[key],
title: payload.title[key],
}
]
})
})
this.isLoading = false
})
.catch(error => {
if (error.response.status === 404)
this.isLoading = false
})
}
}
</script> </script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.cancel-plan {
margin-top: 10px;
}
.list-info {
display: flex;
flex-wrap: wrap;
.list-item {
flex: 0 0 50%;
}
}
</style>

View File

@@ -124,14 +124,14 @@
title: this.$t('menu.profile'), title: this.$t('menu.profile'),
route: 'Profile', route: 'Profile',
}, },
{
title: this.$t('menu.storage'),
route: 'Storage',
},
{ {
title: this.$t('menu.password'), title: this.$t('menu.password'),
route: 'Password', route: 'Password',
}, },
{
title: this.$t('menu.storage'),
route: 'Storage',
},
{ {
title: this.$t('menu.subscription'), title: this.$t('menu.subscription'),
route: 'Subscription', route: 'Subscription',

View File

@@ -1,244 +1,230 @@
<template> <template>
<PageTab :is-loading="isLoading"> <PageTab :is-loading="isLoading">
<PageTabGroup v-if="subscription && !isLoading"> <div v-if="subscription" class="card shadow-card">
<FormLabel> <div class="md:flex md:space-x-10 mb-8">
{{ $t('user_subscription.title') }} <div class="md:mb-0 mb-6">
</FormLabel> <b class="block leading-5 text-lg">
{{ status }}
</b>
<small class="text-gray-500">
{{ $t('We will send you a notification upon Subscription expiration') }}
</small>
</div>
<div>
<b class="block leading-5 text-lg">
{{ price }}
</b>
<small class="text-gray-500">
{{ subscription.relationships.plan.data.attributes.name }}
</small>
</div>
</div>
<!--Info about active subscription--> <div v-for="(limit, i) in limitations" :key="i" class="mb-6">
<div v-if="! subscription.data.attributes.canceled" class="state active"> <b class="mb-3 block text-sm text-gray-400">
<ListInfo class="list-info"> {{ limit.message }}
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" </b>
:content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/> <ProgressLine :data="limit.distribution" />
<ListInfoItem class="list-item" :title="$t('user_subscription.billed')" :content="$t('admin_page_user.subscription.interval_mo')"/> </div>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.created_at')" :content="subscription.data.attributes.created_at"/>
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.renews_at')" :content="subscription.data.attributes.ends_at"/>
</ListInfo>
<div class="plan-action">
<ButtonBase
:disabled="isDeleting"
@click.native="cancelSubscription"
:button-style="cancelButtonStyle"
class="confirm-button">
{{ cancelButtonText }}
</ButtonBase>
</div>
</div>
<!--Info about canceled subscription--> <div class="flex space-x-4 mt-8">
<div v-if="subscription.data.attributes.canceled" class="state canceled"> <ButtonBase class="popup-button" button-style="secondary">
<ListInfo class="list-info"> {{ $t('Cancel Subscription') }}
<ListInfoItem class="list-item" :title="$t('user_subscription.plan')" :content="subscription.data.attributes.name + ' - ' + subscription.data.attributes.capacity_formatted"/> </ButtonBase>
<ListInfoItem class="list-item" :title="$t('user_subscription.status')" :content="status"/> <ButtonBase @click.native="$openUpgradeOptions" class="popup-button" button-style="theme">
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.canceled_at')" :content="subscription.data.attributes.canceled_at"/> {{ $t('Upgrade Plan') }}
<ListInfoItem class="list-item capitalize" :title="$t('user_subscription.ends_at')" :content="subscription.data.attributes.ends_at"/> </ButtonBase>
</ListInfo> </div>
<div class="plan-action"> </div>
<ButtonBase
:disabled="isResuming" <div v-if="! subscription && !isLoading" class="card shadow-card">
@click.native="resumeSubscription" <InfoBox style="margin-bottom: 0">
:button-style="resumeButtonStyle" <p>{{ $t("You don't have any subscription") }}</p>
class="confirm-button"> </InfoBox>
{{ resumeButtonText }} </div>
</ButtonBase>
</div>
</div>
</PageTabGroup>
<InfoBox v-if="! subscription && !isLoading">
<p>{{ $t('user_subscription.empty') }}</p>
</InfoBox>
</PageTab> </PageTab>
</template> </template>
<script> <script>
import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper' import ProgressLine from "../../components/Admin/ProgressLine";
import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup' import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
import ListInfoItem from '/resources/js/components/Others/ListInfoItem' import PageTab from '/resources/js/components/Others/Layout/PageTab'
import FormLabel from '/resources/js/components/Others/Forms/FormLabel' import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
import ButtonBase from '/resources/js/components/FilesView/ButtonBase' import {mapGetters} from 'vuex'
import PageTab from '/resources/js/components/Others/Layout/PageTab' import {events} from '/resources/js/bus'
import InfoBox from '/resources/js/components/Others/Forms/InfoBox' import axios from 'axios'
import ListInfo from '/resources/js/components/Others/ListInfo'
import {ExternalLinkIcon} from "vue-feather-icons"
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'
import axios from 'axios'
export default { export default {
name: 'UserSubscription', name: 'UserSubscription',
components: { components: {
ExternalLinkIcon, ProgressLine,
DatatableWrapper, ButtonBase,
ListInfoItem, InfoBox,
PageTabGroup, PageTab,
ButtonBase, },
FormLabel, computed: {
ListInfo, ...mapGetters([
InfoBox, 'user',
PageTab, ]),
}, status() {
computed: { return {
cancelButtonText() { 'active': `Active until ${this.subscription.attributes.renews_at}`,
return this.isConfirmedCancel ? this.$t('popup_share_edit.confirm') : this.$t('user_subscription.cancel_plan') 'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
}, }[this.subscription.attributes.status]
cancelButtonStyle() { },
return this.isConfirmedCancel ? 'danger-solid' : 'secondary' price() {
}, return {
resumeButtonText() { 'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
return this.isConfirmedResume ? this.$t('popup_share_edit.confirm') : this.$t('user_subscription.resume_plan') 'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
}, }[this.subscription.relationships.plan.data.attributes.interval]
resumeButtonStyle() { },
return this.isConfirmedResume ? 'theme-solid' : 'secondary' },
}, data() {
status() { return {
if (this.subscription.data.attributes.incomplete) { subscription: undefined,
return this.$t('global.incomplete') limitations: [],
} isConfirmedCancel: false,
if (this.subscription.data.attributes.canceled) { isConfirmedResume: false,
return this.$t('global.canceled') isDeleting: false,
} isResuming: false,
if (this.subscription.data.attributes.active) { isLoading: true,
return this.$t('global.active') }
} },
} methods: {
}, cancelSubscription() {
data() {
return {
subscription: undefined,
isConfirmedCancel: false,
isConfirmedResume: false,
isDeleting: false,
isResuming: false,
isLoading: true,
}
},
methods: {
cancelSubscription() {
// Set confirm button // Set confirm button
if (!this.isConfirmedCancel) { if (!this.isConfirmedCancel) {
this.isConfirmedCancel = true this.isConfirmedCancel = true
return return
} }
// Start deleting spinner button // Start deleting spinner button
this.isDeleting = true this.isDeleting = true
this.isLoading = true this.isLoading = true
// Send delete request // Send delete request
axios axios
.post('/api/user/subscription/cancel') .post('/api/user/subscription/cancel')
.then(() => { .then(() => {
// Update user data // Update user data
this.$store.dispatch('getAppData').then(() => { this.$store.dispatch('getAppData').then(() => {
this.fetchSubscriptionDetail() this.fetchSubscriptionDetail()
}) })
events.$emit('alert:open', { events.$emit('alert:open', {
emoji: '👍', emoji: '👍',
title: this.$t('popup_subscription_cancel.title'), title: this.$t('popup_subscription_cancel.title'),
message: this.$t('popup_subscription_cancel.message'), message: this.$t('popup_subscription_cancel.message'),
buttonStyle: 'theme', buttonStyle: 'theme',
button: this.$t('popup_subscription_cancel.button') button: this.$t('popup_subscription_cancel.button')
}) })
}) })
.catch(() => { .catch(() => {
events.$emit('alert:open', { events.$emit('alert:open', {
title: this.$t('popup_error.title'), title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'), message: this.$t('popup_error.message'),
}) })
}) })
.finally(() => { .finally(() => {
// End deleting spinner button // End deleting spinner button
this.isDeleting = false this.isDeleting = false
this.isLoading = false this.isLoading = false
this.isConfirmedCancel = false this.isConfirmedCancel = false
}) })
}, },
resumeSubscription() { resumeSubscription() {
// Set confirm button // Set confirm button
if (! this.isConfirmedResume) { if (!this.isConfirmedResume) {
this.isConfirmedResume = true this.isConfirmedResume = true
return return
} }
// Start deleting spinner button // Start deleting spinner button
this.isResuming = true this.isResuming = true
this.isLoading = true this.isLoading = true
// Send delete request // Send delete request
axios axios
.post('/api/user/subscription/resume') .post('/api/user/subscription/resume')
.then(() => { .then(() => {
// Update user data // Update user data
this.$store.dispatch('getAppData').then(() => { this.$store.dispatch('getAppData').then(() => {
this.fetchSubscriptionDetail() this.fetchSubscriptionDetail()
}) })
events.$emit('alert:open', { events.$emit('alert:open', {
emoji: '👍', emoji: '👍',
title: this.$t('popup_subscription_resumed.title'), title: this.$t('popup_subscription_resumed.title'),
message: this.$t('popup_subscription_resumed.message'), message: this.$t('popup_subscription_resumed.message'),
buttonStyle: 'theme', buttonStyle: 'theme',
button: this.$t('popup_subscription_resumed.button') button: this.$t('popup_subscription_resumed.button')
}) })
}) })
.catch(() => { .catch(() => {
events.$emit('alert:open', { events.$emit('alert:open', {
title: this.$t('popup_error.title'), title: this.$t('popup_error.title'),
message: this.$t('popup_error.message'), message: this.$t('popup_error.message'),
}) })
}) })
.finally(() => { .finally(() => {
// End deleting spinner button // End deleting spinner button
this.isResuming = false this.isResuming = false
this.isLoading = false this.isLoading = false
this.isConfirmedResume = false this.isConfirmedResume = false
}) })
}, },
fetchSubscriptionDetail() { fetchSubscriptionDetail() {
axios.get('/api/user/subscription') axios.get('/api/subscription/detail')
.then(response => { .then(response => {
if (response.status == 204) { this.subscription = response.data.data
this.subscription = undefined
}
if (response.status == 200) { Object
this.subscription = response.data .entries(this.user.data.meta.limitations)
} .map(([key, item]) => {
}).finally(() => { let payload = {
this.isLoading = false color: {
}) 'max_storage_amount': 'warning',
} 'max_team_members': 'purple',
}, },
created() { message: {
this.fetchSubscriptionDetail() 'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
} 'max_team_members': `Total ${item.use} of ${item.total} Members`,
} },
title: {
'max_storage_amount': `Storage`,
'max_team_members': `Team Members`,
}
}
this.limitations.push({
message: payload.message[key],
distribution: [
{
progress: item.percentage,
color: payload.color[key],
title: payload.title[key],
}
]
})
})
this.isLoading = false
})
.finally(() => {
this.isLoading = false
})
}
},
created() {
this.fetchSubscriptionDetail()
}
}
</script> </script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.plan-action {
margin-top: 10px;
}
.list-info {
display: flex;
flex-wrap: wrap;
.list-item {
flex: 0 0 50%;
}
}
</style>

View File

@@ -742,6 +742,16 @@ class SetupDevEnvironment extends Command
'name' => 'Finance Documents', 'name' => 'Finance Documents',
]); ]);
collect([$companyProjectFolder, $financeDocumentsFolder])
->each(function ($folder) use ($user) {
DB::table('team_folder_members')
->insert([
'parent_id' => $folder->id,
'user_id' => $user->id,
'permission' => 'owner',
]);
});
// Attach members // Attach members
$members = User::whereNotIn('email', ['howdy@hi5ve.digital']) $members = User::whereNotIn('email', ['howdy@hi5ve.digital'])
->get(); ->get();

View File

@@ -1,4 +1,5 @@
<?php <?php
namespace App\Users\Models; namespace App\Users\Models;
use ByteUnits\Metric; use ByteUnits\Metric;
@@ -92,7 +93,7 @@ class User extends Authenticatable implements MustVerifyEmail
{ {
$is_storage_limit = get_settings('storage_limitation') ?? 1; $is_storage_limit = get_settings('storage_limitation') ?? 1;
if (! $is_storage_limit) { if (!$is_storage_limit) {
return [ return [
'used' => $this->usedCapacity, 'used' => $this->usedCapacity,
'used_formatted' => Metric::bytes($this->usedCapacity)->format(), 'used_formatted' => Metric::bytes($this->usedCapacity)->format(),
@@ -100,20 +101,48 @@ class User extends Authenticatable implements MustVerifyEmail
} }
return [ return [
'used' => (float) get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount), 'used' => (float)get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount),
'used_formatted' => get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount) . '%', 'used_formatted' => get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount) . '%',
'capacity' => $this->limitations->max_storage_amount, 'capacity' => $this->limitations->max_storage_amount,
'capacity_formatted' => format_gigabytes($this->limitations->max_storage_amount), 'capacity_formatted' => format_gigabytes($this->limitations->max_storage_amount),
]; ];
} }
// TODO: caching & refactoring
public function accountLimitations(): array
{
$members = \DB::table('team_folder_members')
->where('user_id', $this->id)
->pluck('parent_id');
$membersUse = \DB::table('team_folder_members')
->where('user_id', '!=', $this->id)
->whereIn('parent_id', $members)
->pluck('user_id')
->unique()
->count();
return [
'max_storage_amount' => [
'use' => Metric::bytes($this->usedCapacity)->format(),
'total' => format_gigabytes($this->limitations->max_storage_amount),
'percentage' => (float)get_storage_fill_percentage($this->usedCapacity, $this->limitations->max_storage_amount),
],
'max_team_members' => [
'use' => $membersUse,
'total' => (int)$this->limitations->max_team_members,
'percentage' => ($membersUse / $this->limitations->max_team_members) * 100,
],
];
}
/** /**
* Get user used storage capacity in bytes * Get user used storage capacity in bytes
*/ */
public function getUsedCapacityAttribute(): int public function getUsedCapacityAttribute(): int
{ {
return $this->filesWithTrashed return $this->filesWithTrashed
->map(fn ($item) => $item->getRawOriginal())->sum('filesize'); ->map(fn($item) => $item->getRawOriginal())->sum('filesize');
} }
/** /**

View File

@@ -44,6 +44,9 @@ class UserResource extends JsonResource
'subscription' => new SubscriptionResource($this->subscription), 'subscription' => new SubscriptionResource($this->subscription),
]), ]),
], ],
'meta' => [
'limitations' => $this->accountLimitations(),
],
], ],
]; ];
} }