feat(ui): add paywall check for chat support access

Introduced PaywallChat component in AppBar.vue to handle restricted chat
support access.

Updated openShellhubHelp logic to route users based on subscription and
environment.

Modified Vuex support module to track chat support status.

Refactored openChatwoot function for improved organization.

Adjusted tests to validate new paywall behavior and chatSupportPaywall state.

Author: luannmoreira

ui/src/components/AppBar/AppBar.vue

@@ -1,4 +1,5 @@
 <template>
+  <PaywallChat v-model="chatSupportPaywall" />
   <v-app-bar
     flat
     floating
@@ -98,13 +99,14 @@ import {
   ref,
 } from "vue";
 import { useRouter, useRoute, RouteLocationRaw, RouteLocation } from "vue-router";
-import { useEventListener } from "@vueuse/core";
 import { useChatWoot } from "@productdevbook/chatwoot/vue";
+import { useEventListener } from "@vueuse/core";
 import { useStore } from "../../store";
 import { createNewClient } from "../../api/http";
 import handleError from "../../utils/handleError";
 import UserIcon from "../User/UserIcon.vue";
 import Notification from "./Notifications/Notification.vue";
+import PaywallChat from "../User/PaywallChat.vue";
 import { envVariables } from "@/envVariables";
 
 type MenuItem = {
@@ -119,9 +121,6 @@ type BreadcrumbItem = {
   title: string;
   href: string;
 };
-
-const { setUser, setConversationCustomAttributes } = useChatWoot();
-
 const store = useStore();
 const router = useRouter();
 const route = useRoute();
@@ -131,11 +130,11 @@ const getStatusDarkMode = computed(
 const tenant = computed(() => store.getters["auth/tenant"]);
 const userEmail = computed(() => store.getters["auth/email"]);
 const userId = computed(() => store.getters["auth/id"]);
-const identifier = computed(() => store.getters["support/getIdentifier"]);
 const currentUser = computed(() => store.getters["auth/currentUser"]);
-const isDarkMode = ref(getStatusDarkMode.value === "dark");
 const billingActive = computed(() => store.getters["billing/active"]);
-
+const identifier = computed(() => store.getters["support/getIdentifier"]);
+const isDarkMode = ref(getStatusDarkMode.value === "dark");
+const chatSupportPaywall = ref(false);
 const showNavigationDrawer = defineModel<boolean>();
 
 const triggerClick = (item: MenuItem): void => {
@@ -168,27 +167,54 @@ const toggleDarkMode = () => {
   store.dispatch("layout/setStatusDarkMode", isDarkMode.value);
 };
 
-const openShellhubHelp = async () => {
-  if ((envVariables.isCloud || envVariables.isEnterprise) && billingActive) {
-    await store.dispatch("support/get", tenant.value);
-  }
-  if (identifier.value.length === 0) {
-    window.open("https://github.com/shellhub-io/shellhub/issues/new/choose", "_blank");
-    return;
-  }
+const openChatwoot = async (): Promise<void> => {
+  const { setUser, setConversationCustomAttributes, toggle } = useChatWoot();
+
+  await store.dispatch("support/get", tenant.value);
+
   setUser(userId.value, {
     name: currentUser.value,
     email: userEmail.value,
     identifier_hash: identifier.value,
   });
+
   useEventListener(window, "chatwoot:on-message", () => {
     setConversationCustomAttributes({
       namespace: store.getters["namespaces/get"].name,
       tenant: tenant.value,
       domain: window.location.hostname,
     });
   });
-  await store.dispatch("support/toggle");
+
+  store.commit("support/setCreatedStatus", true);
+  toggle("open");
+};
+
+const openPaywall = (): void => {
+  chatSupportPaywall.value = true;
+};
+
+const redirectToGitHub = (): void => {
+  window.open("https://github.com/shellhub-io/shellhub/issues/new/choose", "_blank");
+};
+
+const openShellhubHelp = async (): Promise<void> => {
+  switch (true) {
+    case envVariables.isCloud && billingActive.value:
+      await openChatwoot();
+      break;
+
+    case envVariables.isCommunity || (envVariables.isCloud && !billingActive.value):
+      openPaywall();
+      break;
+
+    case envVariables.isEnterprise:
+      redirectToGitHub();
+      break;
+
+    default:
+      throw new Error("Unsupported environment configuration.");
+  }
 };
 
 const menu = [
@@ -225,5 +251,5 @@ const generateBreadcrumbs = (route: RouteLocation): BreadcrumbItem[] => {
 
 const breadcrumbItems = computed(() => generateBreadcrumbs(route));
 
-defineExpose({ openShellhubHelp, logout, isDarkMode, breadcrumbItems, currentUser, identifier });
+defineExpose({ openShellhubHelp, chatSupportPaywall, logout, isDarkMode, breadcrumbItems, currentUser, identifier });
 </script>

ui/src/components/User/PaywallChat.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    transition="dialog-bottom-transition"
+    max-width="600"
+    @click:outside="close"
+    @keydown.esc="close"
+  >
+    <v-card color="background" data-test="card-dialog">
+      <v-container>
+        <v-row data-test="icon-chat">
+          <v-col class="d-flex justify-center align-center">
+            <div class="circle-one shadow d-flex justify-center align-center">
+              <div class="circle-two shadow d-flex justify-center align-center">
+                <v-icon color="success" class="green-inner-shadow" size="108">
+                  mdi-chat-question
+                </v-icon>
+              </div>
+            </div>
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col class="pb-0">
+            <h1 class="d-flex justify-center align-center text-center" data-test="upgrade-heading">
+              Upgrade to have access to chat support!
+            </h1>
+          </v-col>
+        </v-row>
+        <v-row class="px-6">
+          <v-col class="pt-1 pb-6">
+            <p class="d-flex justify-center align-center text-grey text-center" data-test="upgrade-description">
+              Get real-time assistance from our team with priority responses.
+              Skip the hassle of documentation — upgrade now and unlock direct chat support.
+            </p>
+            <p class="align-center text-grey text-center" data-test="upgrade-description2">
+              However, you can still use
+              <a href="https://docs.shellhub.io/" target="_blank" rel="noopener noreferrer" data-test="link-anchor">our Documentation</a>
+              to find answers to your questions and troubleshoot issues on your own.
+            </p>
+          </v-col>
+        </v-row>
+        <v-card-actions data-test="card-actions">
+          <v-btn @click="close()" class="mt-4" variant="text" data-test="close-btn">
+            Close
+          </v-btn>
+          <v-spacer />
+          <v-btn
+            color="primary"
+            variant="flat"
+            href="www.shellhub.io/pricing"
+            target="_blank"
+            rel="noreferrer noopener"
+            data-test="upgrade-btn">
+            Upgrade
+          </v-btn>
+        </v-card-actions>
+      </v-container>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const dialog = defineModel({ default: false });
+
+const close = () => {
+  dialog.value = false;
+};
+
+defineExpose({ dialog });
+</script>
+
+<style scoped>
+.green-inner-shadow {
+  filter: drop-shadow(0px 0px 20px rgba(43, 255, 10, 0.45));
+}
+
+.shadow {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 15px 10px 0px;
+  border-radius: 50%;
+}
+
+.circle-one {
+  height: 15.625rem;
+  width: 15.625rem;
+  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(76,175,80,0.1) 60%, rgba(76,175,80,0.75) 120%);
+}
+
+.circle-two {
+  height: 12.5rem;
+  width: 12.5rem;
+  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(76,175,80,0.1) 75%, rgba(76,175,80,0.75) 120%);
+}
+</style>

ui/src/main.ts

@@ -40,7 +40,7 @@ app.use(VueGtag, {
   config: { id: envVariables.googleAnalyticsID || "" },
 });
 
-if ((envVariables.isCloud || envVariables.isEnterprise) && (envVariables.chatWootWebsiteToken && envVariables.chatWootBaseURL)) {
+if ((envVariables.isCloud) && (envVariables.chatWootWebsiteToken && envVariables.chatWootBaseURL)) {
   app.use(
     createChatWoot({
       init: {

ui/src/store/modules/auth.ts

@@ -129,8 +129,6 @@ export const auth: Module<AuthState, State> = {
       state.email = "";
       state.role = "";
       state.mfa = false;
-      toggle("close");
-      reset();
     },
 
     changeData(state, data) {
@@ -363,6 +361,11 @@ export const auth: Module<AuthState, State> = {
       localStorage.removeItem("role");
       localStorage.removeItem("mfa");
       localStorage.removeItem("recovery_email");
+      const chatIsCreated = context.rootGetters["support/getCreatedStatus"];
+      if (chatIsCreated) {
+        toggle("close");
+        reset();
+      }
     },
 
     changeUserData(context, data) {

ui/src/store/modules/support.ts

@@ -1,28 +1,32 @@
 import { Module } from "vuex";
-import { useChatWoot } from "@productdevbook/chatwoot/vue";
 import * as apiSupport from "../api/namespaces";
 import { State } from "..";
 
-const { toggle } = useChatWoot();
-
 export interface SupportState {
   identifier: string;
+  chatCreated: boolean;
 }
 
 export const support: Module<SupportState, State> = {
   namespaced: true,
   state: {
     identifier: "",
+    chatCreated: false,
   },
 
   getters: {
     getIdentifier: (state) => state.identifier,
+    getCreatedStatus: (state) => state.chatCreated,
   },
 
   mutations: {
     setIdentifier: (state, identifier) => {
       state.identifier = identifier;
     },
+
+    setCreatedStatus: (state, status) => {
+      state.chatCreated = status;
+    },
   },
 
   actions: {
@@ -35,6 +39,5 @@ export const support: Module<SupportState, State> = {
         throw error;
       }
     },
-    toggle: () => { toggle("open"); },
   },
 };