show action blocked modal with instructions instead of small notification when server returns action blocked error

resources/js/Components/NotificationContainer.vue

@@ -11,12 +11,65 @@
                 :message="notification.message"></Notification>
         </div>
     </div>
+    <DialogModal :show="showActionBlockedModal">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Action blocked </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div
+                class="rounded-full flex items-center justify-center w-16 h-16 mx-auto border border-border-tertiary bg-secondary">
+                <XCircleIcon class="w-10"></XCircleIcon>
+            </div>
+            <div class="max-w-sm text-center mx-auto py-4 text-base">
+                <p class="py-1">
+                    Your organization is currently
+                    <strong class="font-semibold"
+                        >blocked from performing this action</strong
+                    >
+                </p>
+                <p class="py-1">
+                    To unblock your organization, please
+                    <strong class="font-semibold">
+                        upgrade to a premium plan</strong
+                    >
+                    or remove all users except the owner.
+                </p>
+
+                <Link href="/billing">
+                    <PrimaryButton
+                        type="button"
+                        class="mt-6"
+                        v-if="isBillingActivated() && canUpdateOrganization()">
+                        <CreditCardIcon class="w-5 h-5 me-2" />
+                        Go to Billing
+                    </PrimaryButton>
+                </Link>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="showActionBlockedModal = false">
+                Cancel</SecondaryButton
+            >
+        </template>
+    </DialogModal>
 </template>
 
 <script setup lang="ts">
 import Notification from '@/Components/Common/Notification/Notification.vue';
 import { storeToRefs } from 'pinia';
 import { useNotificationsStore } from '@/utils/notification';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import { isBillingActivated } from '@/utils/billing';
+import { canUpdateOrganization } from '@/utils/permissions';
+import { CreditCardIcon, XCircleIcon } from '@heroicons/vue/20/solid';
+import { Link } from '@inertiajs/vue3';
+import PrimaryButton from '../packages/ui/src/Buttons/PrimaryButton.vue';
+import SecondaryButton from '../packages/ui/src/Buttons/SecondaryButton.vue';
 
-const { notifications } = storeToRefs(useNotificationsStore());
+const { notifications, showActionBlockedModal } = storeToRefs(
+    useNotificationsStore()
+);
 </script>

resources/js/utils/notification.ts

@@ -16,6 +16,8 @@ export const useNotificationsStore = defineStore('notifications', () => {
         }[]
     >([]);
 
+    const showActionBlockedModal = ref(false);
+
     function addNotification(
         type: NotificationType,
         title: string,
@@ -59,13 +61,20 @@ export const useNotificationsStore = defineStore('notifications', () => {
                     error?.response?.status === 403 ||
                     error?.response?.status === 400
                 ) {
-                    addNotification(
+                    if (
-                        'error',
+                        error?.response?.data?.key ===
-                        errorMessage ?? 'Request Error',
+                        'organization_has_no_subscription_but_multiple_members'
-                        error.response?.data?.errorMessage ??
+                    ) {
-                            error?.response?.data?.message ??
+                        showActionBlockedModal.value = true;
-                            'An request error occurred. Please try again later.'
+                    } else {
-                    );
+                        addNotification(
+                            'error',
+                            errorMessage ?? 'Request Error',
+                            error.response?.data?.errorMessage ??
+                                error?.response?.data?.message ??
+                                'An request error occurred. Please try again later.'
+                        );
+                    }
                 } else if (error?.response?.status === 422) {
                     const message = error.response.data.message;
                     addNotification('error', message);
@@ -94,5 +103,10 @@ export const useNotificationsStore = defineStore('notifications', () => {
         }
     }
 
-    return { addNotification, notifications, handleApiRequestNotifications };
+    return {
+        addNotification,
+        notifications,
+        handleApiRequestNotifications,
+        showActionBlockedModal,
+    };
 });

tailwind.config.js

@@ -71,6 +71,11 @@ export default {
                     '300': 'rgba(var(--color-accent-tertiary), <alpha-value>)',
                     '400': 'rgba(var(--color-accent-secondary), <alpha-value>)',
                     '500': 'rgba(var(--color-accent-primary), <alpha-value>)',
+                    '600': 'rgba(2, 132, 199, <alpha-value>)',
+                    '700': 'rgba(3, 105, 161, <alpha-value>)',
+                    '800': 'rgba(7, 89, 133, <alpha-value>)',
+                    '900': 'rgba(12, 74, 110, <alpha-value>)',
+                    '950': 'rgba(8, 47, 73, <alpha-value>)',
                 },
             },
         },