Frontend upload restrict consolidation

resources/js/components/Admin/ProgressLine.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex items-center mb-4 rounded dark:bg-2x-dark-foreground bg-light-300">
-            <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 > 1 ? chart.progress : 0) + '%'}" class="chart-wrapper">
 				<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
 
 				<!--Only singe line-->

resources/js/helpers/AlertHelpers.js

@@ -1,13 +1,30 @@
-import {events} from "../bus";
-import i18n from "../i18n";
+import store from '../store/index'
+import {events} from "../bus"
+import i18n from "../i18n"
 
 const AlertHelpers = {
 	install(Vue) {
 
 		Vue.prototype.$temporarilyDisabledUpload = function () {
+
+			let messages = {
+				metered: {
+					title: i18n.t('Upload is temporarily disabled'),
+					message: i18n.t('Please review your billing settings.')
+				},
+				fixed: {
+					title: i18n.t('Upload is temporarily disabled'),
+					message: i18n.t('Please review your billing settings.')
+				},
+				none: {
+					title: i18n.t('You exceeded your upload limit'),
+					message: i18n.t('Unfortunately, you can not upload your file.')
+				},
+			}
+
 			events.$emit('alert:open', {
-				title: i18n.t('Upload is temporarily disabled'),
-				message: i18n.t('Please review your billing settings.')
+				title: messages[store.getters.config.subscriptionType]['title'],
+				message: messages[store.getters.config.subscriptionType]['message']
 			})
 		}
 

resources/js/helpers/functionHelpers.js

@@ -124,7 +124,7 @@ const FunctionHelpers = {
             distribution = orderBy(distribution, ['progress'], ['desc'])
 
             // Push at the end empty space data
-            if (config.subscriptionType !== 'metered') {
+            if (config.subscriptionType === 'fixed' || config.storageLimit) {
                 distribution.push({
                     progress: 100 - storage.data.attributes.percentage,
                     color: 'secondary',

resources/js/views/Profile.vue

@@ -35,7 +35,8 @@
                             <div class="info">
                                 <b class="name">
                                     {{ user.data.relationships.settings.data.attributes.name }}
-                                    <ColorLabel v-if="config.isSaaS" :color="subscriptionColor">
+
+                                    <ColorLabel v-if="this.config.subscriptionType === 'fixed'" :color="subscriptionColor">
                                         {{ subscriptionStatus }}
                                     </ColorLabel>
                                 </b>
@@ -96,8 +97,8 @@
         },
         computed: {
             ...mapGetters([
+				'config',
             	'user',
-				'config'
 			]),
             subscriptionStatus() {
                 return this.user.data.relationships.subscription
@@ -116,7 +117,7 @@
                 return this.user.data.attributes.incomplete_payment
             },
 			pages() {
-				return [
+				let list = [
 					{
 						title: this.$t('menu.profile'),
 						route: 'Profile',
@@ -129,11 +130,17 @@
 						title: this.$t('menu.storage'),
 						route: 'Storage',
 					},
-					{
+				]
+
+				// Push billing item if subscription is set
+				if (['fixed', 'metered'].includes(this.config.subscriptionType)) {
+					list.push({
 						title: this.$t('Billing'),
 						route: 'Billing',
-					},
-				]
+					})
+				}
+
+				return list
 			}
         },
         data() {

resources/js/views/User/Storage.vue

@@ -9,7 +9,7 @@
 				{{ storage.data.attributes.used }}
 			</b>
 
-			<b v-if="['fixed', 'none'].includes(config.subscriptionType)" class="mt-0.5 block text-sm text-gray-400">
+			<b v-if="config.subscriptionType === 'fixed' || config.storageLimit" class="mt-0.5 block text-sm text-gray-400">
 				{{ $t('Total of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
 			</b>