restriction text implementation for the frontend

resources/js/components/Subscription/RestrictionWarningBar.vue

@@ -1,7 +1,7 @@
 <template>
-    <div v-if="$store.getters.isLimitedUser" class="bg-red-500 py-1 text-center">
+    <div v-if="$store.getters.userLimitationReason" class="bg-gradient-to-r from-red-600 to-red-500 py-2.5 px-1 text-center leading-none">
         <router-link :to="{ name: 'Billing' }" class="text-xs font-bold text-white">
-            {{ $t('restricted_account_warning') }}
+            {{ $t('restricted_account_warning') + ' ' + $store.getters.userLimitationReason }}
         </router-link>
     </div>
 </template>

resources/js/store/modules/userAuth.js

@@ -201,10 +201,7 @@ const mutations = {
 }
 
 const getters = {
-    isLimitedUser: (state) =>
-        state.user &&
-        state.user.data.relationships.failedPayments &&
-        state.user.data.relationships.failedPayments.data.length === 3,
+    userLimitationReason: (state) => state.user && state.user.data.meta.restrictions.reason,
     permission: (state) => state.permission,
     user: (state) => state.user,
 }

resources/js/views/Platform.vue

@@ -110,7 +110,7 @@ export default {
         DragUI,
     },
     computed: {
-        ...mapGetters(['isVisibleSidebar', 'isLimitedUser', 'config', 'currentFolder']),
+        ...mapGetters(['isVisibleSidebar', 'config', 'currentFolder']),
     },
     data() {
         return {