- Restriction UI warning

- create folder restriction
- fixed UI bugs

resources/js/App.vue

@@ -9,6 +9,13 @@
         <!--Show spinner before translations is loaded-->
         <Spinner v-if="! isLoaded"/>
 
+        <!--Show warning bar when user functionality is restricted-->
+		<div v-if="isLimitedUser" class="bg-red-500 text-center py-1">
+			<router-link :to="{name: 'Billing'}" class="text-white font-bold text-xs">
+				{{ $t('Your functionality is restricted. Please review your billing settings.') }}
+			</router-link>
+		</div>
+
         <!--App view-->
         <router-view v-if="isLoaded" />
 
@@ -41,7 +48,9 @@ export default {
     },
 	computed: {
 		...mapGetters([
-			'isDarkMode'
+			'isLimitedUser',
+			'isDarkMode',
+			'user',
 		]),
 	},
 	watch: {

resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue

@@ -143,9 +143,6 @@ export default {
 			if ('two-factor-recovery-codes' === name)
 				this.getRecoveryCodes()
 		})
-	},
-	destroyed() {
-		events.$off('popup:open')
 	}
 }
 </script>

resources/js/helpers/functionHelpers.js

@@ -1,6 +1,6 @@
+import {debounce, isArray, orderBy} from "lodash"
 import i18n from '/resources/js/i18n/index'
 import store from '../store/index'
-import {debounce, isArray, orderBy} from "lodash";
 import {events} from '../bus'
 import axios from 'axios'
 

resources/js/helpers/itemHelpers.js

@@ -1,16 +1,18 @@
-import {events} from "../bus";
+import i18n from '/resources/js/i18n/index'
+import store from '../store/index'
+import {events} from '../bus'
 
 const itemHelpers = {
 	install(Vue) {
 		Vue.prototype.$emptyTrash = function () {
-			this.$store.dispatch('emptyTrash')
+			store.dispatch('emptyTrash')
 		}
 		Vue.prototype.$emptyTrashQuietly = function () {
-			this.$store.dispatch('emptyTrashQuietly')
+			store.dispatch('emptyTrashQuietly')
 		}
 
 		Vue.prototype.$shareCancel = function () {
-			this.$store.dispatch('shareCancel')
+			store.dispatch('shareCancel')
 		}
 
 		Vue.prototype.$renameFileOrFolder = function (entry) {
@@ -22,16 +24,16 @@ const itemHelpers = {
 		}
 
 		Vue.prototype.$createFolder = function () {
-			this.$store.dispatch('createFolder', {
-				name: this.$t('popup_create_folder.folder_default_name')
+			store.dispatch('createFolder', {
+				name: i18n.t('popup_create_folder.folder_default_name')
 			})
 		}
 
 		Vue.prototype.$downloadSelection = function (item) {
-			let clipboard = this.$store.getters.clipboard
+			let clipboard = store.getters.clipboard
 
 			if (clipboard.length > 1 || (clipboard.length === 1 && clipboard[0].data.type === 'folder'))
-				this.$store.dispatch('downloadZip')
+				store.dispatch('downloadZip')
 			else {
 				Vue.prototype.$downloadFile(item.data.attributes.file_url, item.data.attributes.name + '.' + item.data.attributes.mimetype)
 			}
@@ -39,8 +41,8 @@ const itemHelpers = {
 
 		Vue.prototype.$dissolveTeamFolder = function (folder) {
 			events.$emit('confirm:open', {
-				title: this.$t('Are you sure you want to dissolve this team?'),
-				message: this.$t('All team members will lose access to your files and existing folder will be moved into your "Files" section.'),
+				title: i18n.t('Are you sure you want to dissolve this team?'),
+				message: i18n.t('All team members will lose access to your files and existing folder will be moved into your "Files" section.'),
 				action: {
 					id: folder.data.id,
 					operation: 'dissolve-team-folder',
@@ -50,8 +52,8 @@ const itemHelpers = {
 
 		Vue.prototype.$detachMeFromTeamFolder = function (folder) {
 			events.$emit('confirm:open', {
-				title: this.$t('Are you sure you want to leave this team?'),
-				message: this.$t("You will don't have access to the files and all your previously uploaded content will be part of this Team Folder you are leaving."),
+				title: i18n.t('Are you sure you want to leave this team?'),
+				message: i18n.t("You will don't have access to the files and all your previously uploaded content will be part of this Team Folder you are leaving."),
 				action: {
 					id: folder.data.id,
 					operation: 'leave-team-folder',
@@ -72,25 +74,25 @@ const itemHelpers = {
 		}
 
 		Vue.prototype.$removeFavourite = function (folder) {
-			this.$store.dispatch('removeFromFavourites', folder)
+			store.dispatch('removeFromFavourites', folder)
 		}
 
 		Vue.prototype.$deleteFileOrFolder = function (entry) {
-			if (!this.$store.getters.clipboard.includes(entry)) {
-				this.$store.dispatch('deleteItem', entry)
+			if (!store.getters.clipboard.includes(entry)) {
+				store.dispatch('deleteItem', entry)
 			}
 
-			if (this.$store.getters.clipboard.includes(entry)) {
-				this.$store.dispatch('deleteItem')
+			if (store.getters.clipboard.includes(entry)) {
+				store.dispatch('deleteItem')
 			}
 		}
 
 		Vue.prototype.$restoreFileOrFolder = function (entry) {
-			if (!this.$store.getters.clipboard.includes(entry))
-				this.$store.dispatch('restoreItem', entry)
+			if (!store.getters.clipboard.includes(entry))
+				store.dispatch('restoreItem', entry)
 
-			if (this.$store.getters.clipboard.includes(entry))
-				this.$store.dispatch('restoreItem', null)
+			if (store.getters.clipboard.includes(entry))
+				store.dispatch('restoreItem', null)
 		}
 
 		Vue.prototype.$shareFileOrFolder = function (entry) {

resources/js/store/modules/fileFunctions.js

@@ -117,7 +117,12 @@ const actions = {
                     dispatch('getAppData')
 
             })
-            .catch(() => Vue.prototype.$isSomethingWrong())
+            .catch(error => {
+                events.$emit('alert:open', {
+                    title: error.response.data.message,
+                    message: i18n.t('popup_error.message')
+                })
+            })
     },
     renameItem: ({commit, getters, dispatch}, data) => {
 
@@ -222,13 +227,16 @@ const actions = {
                         '413': {
                             title: i18n.t('popup_paylod_error.title'),
                             message: i18n.t('popup_paylod_error.message')
-                        }
+                        },
+                        '401': {
+                            title: error.response.data.message,
+                        },
                     }
 
                     events.$emit('alert:open', {
                         emoji: '😬😬😬',
                         title: messages[error.response.status]['title'],
-                        message: messages[error.response.status]['message']
+                        message: messages[error.response.status]['message'] || null
                     })
 
                     commit('PROCESSING_FILE', false)

resources/js/store/modules/userAuth.js

@@ -143,6 +143,7 @@ const mutations = {
 }
 
 const getters = {
+    isLimitedUser: state => state.user && state.user.data.relationships.failedPayments && state.user.data.relationships.failedPayments.data.length === 3,
     permission: state => state.permission,
     user: state => state.user,
 }

resources/js/views/Platform.vue

@@ -110,7 +110,8 @@
 		},
 		computed: {
 			...mapGetters([
-				'isVisibleSidebar'
+				'isVisibleSidebar',
+				'isLimitedUser',
 			])
 		},
 		data() {