refactor(ui): migrate Support store to Pinia

Author: luizhf42

ui/src/components/AppBar/AppBar.vue

@@ -100,7 +100,6 @@ import {
 } from "vue";
 import { useRouter, useRoute, RouteLocationRaw, RouteLocation } from "vue-router";
 import { useChatWoot } from "@productdevbook/chatwoot/vue";
-import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import UserIcon from "../User/UserIcon.vue";
 import NotificationsMenu from "./Notifications/NotificationsMenu.vue";
@@ -113,6 +112,7 @@ import useLayoutStore from "@/store/modules/layout";
 import useNamespacesStore from "@/store/modules/namespaces";
 import useStatsStore from "@/store/modules/stats";
 import { IStats } from "@/interfaces/IStats";
+import useSupportStore from "@/store/modules/support";
 
 type MenuItem = {
   title: string;
@@ -132,23 +132,23 @@ defineOptions({
 });
 
 const { setUser, setConversationCustomAttributes, toggle, reset } = useChatWoot();
-const store = useStore();
 const authStore = useAuthStore();
 const billingStore = useBillingStore();
 const layoutStore = useLayoutStore();
 const namespacesStore = useNamespacesStore();
 const statsStore = useStatsStore();
+const supportStore = useSupportStore();
 const router = useRouter();
 const route = useRoute();
 const snackbar = useSnackbar();
-const theme = computed(() => layoutStore.theme);
-const isChatCreated = computed(() => store.getters["support/getCreatedStatus"]);
 const tenant = computed(() => authStore.tenantId);
 const userEmail = computed(() => authStore.email);
 const userId = computed(() => authStore.id);
 const currentUser = computed(() => authStore.username);
 const isBillingActive = computed(() => billingStore.isActive);
-const identifier = computed(() => store.getters["support/getIdentifier"]);
+const theme = computed(() => layoutStore.theme);
+const isChatCreated = computed(() => supportStore.isChatCreated);
+const identifier = computed(() => supportStore.identifier);
 const isDarkMode = ref(theme.value === "dark");
 const chatSupportPaywall = ref(false);
 const showNavigationDrawer = defineModel<boolean>();
@@ -174,7 +174,7 @@ const logout = async () => {
     if (isChatCreated.value) {
       toggle("close");
       reset();
-      store.commit("support/setCreatedStatus", false);
+      supportStore.isChatCreated = false;
     }
     await router.push({ name: "Login" });
   } catch (error: unknown) {
@@ -189,7 +189,7 @@ const toggleDarkMode = () => {
 
 const openChatwoot = async (): Promise<void> => {
   try {
-    await store.dispatch("support/get", tenant.value);
+    await supportStore.getIdentifier(tenant.value);
 
     setUser(userId.value, {
       name: currentUser.value,
@@ -214,7 +214,7 @@ const openChatwoot = async (): Promise<void> => {
       window.dispatchEvent(new CustomEvent("chatwoot:ready"));
     }
 
-    store.commit("support/setCreatedStatus", true);
+    supportStore.isChatCreated = true;
     toggle("open");
   } catch (error) {
     snackbar.showError("Failed to open chat support. Please check your account's billing and try again later.");

ui/src/store/index.ts

@@ -3,12 +3,10 @@ import { createStore, Store, useStore as vuexUseStore } from "vuex";
 
 import { users, UsersState } from "./modules/users";
 import { tags, TagsState } from "./modules/tags";
-import { support, SupportState } from "./modules/support";
 import { webEndpoints, WebEndpointsState } from "./modules/web_endpoints";
 
 export interface State {
   webEndpoints: WebEndpointsState;
-  support: SupportState;
   tags: TagsState;
   users: UsersState;
 }
@@ -18,7 +16,6 @@ export const key: InjectionKey<Store<State>> = Symbol("store");
 export const store = createStore<State>({
   modules: {
     webEndpoints,
-    support,
     tags,
     users,
   },

ui/src/store/modules/support.ts

@@ -1,40 +1,23 @@
-import { Module } from "vuex";
+import { defineStore } from "pinia";
+import { ref } from "vue";
 import { useChatWoot } from "@productdevbook/chatwoot/vue";
-import * as apiSupport from "../api/namespaces";
-import { State } from "..";
+import * as supportApi from "../api/namespaces";
 
-export interface SupportState {
-  identifier: string;
-  chatCreated: boolean;
-}
+const useSupportStore = defineStore("support", () => {
+  const identifier = ref<string>("");
+  const isChatCreated = ref<boolean>(false);
 
-export const support: Module<SupportState, State> = {
-  namespaced: true,
-  state: {
-    identifier: "",
-    chatCreated: false,
-  },
+  const getIdentifier = async (tenantId: string) => {
+    useChatWoot().reset();
+    const res = await supportApi.getSupportID(tenantId);
+    identifier.value = res.data.identifier as string;
+  };
 
-  getters: {
-    getIdentifier: (state) => state.identifier,
-    getCreatedStatus: (state) => state.chatCreated,
-  },
+  return {
+    identifier,
+    isChatCreated,
+    getIdentifier,
+  };
+});
 
-  mutations: {
-    setIdentifier: (state, identifier) => {
-      state.identifier = identifier;
-    },
-
-    setCreatedStatus: (state, status) => {
-      state.chatCreated = status;
-    },
-  },
-
-  actions: {
-    get: async (context, data) => {
-      useChatWoot().reset();
-      const res = await apiSupport.getSupportID(data);
-      context.commit("setIdentifier", res.data.identifier);
-    },
-  },
-};
+export default useSupportStore;

ui/tests/components/AppBar/AppBar.spec.ts

@@ -12,6 +12,7 @@ import { envVariables } from "@/envVariables";
 import { SnackbarPlugin } from "@/plugins/snackbar";
 import useAuthStore from "@/store/modules/auth";
 import useBillingStore from "@/store/modules/billing";
+import useSupportStore from "@/store/modules/support";
 
 const Component = {
   template: "<v-layout><AppBar /></v-layout>",
@@ -22,6 +23,7 @@ vi.mock("@productdevbook/chatwoot/vue", () => ({
     setUser: vi.fn(),
     setConversationCustomAttributes: vi.fn(),
     toggle: vi.fn(),
+    reset: vi.fn(),
   }),
 }));
 
@@ -71,6 +73,7 @@ describe("AppBar Component", () => {
   setActivePinia(createPinia());
   const authStore = useAuthStore();
   const billingStore = useBillingStore();
+  const supportStore = useSupportStore();
 
   beforeEach(async () => {
     window.matchMedia = vi.fn().mockImplementation((query) => ({
@@ -184,13 +187,13 @@ describe("AppBar Component", () => {
     vi.spyOn(drawer.vm, "identifier", "get").mockReturnValue("mocked_identifier");
 
     const windowOpenMock = vi.spyOn(window, "open").mockImplementation(() => null);
-    const storeDispatchMock = vi.spyOn(store, "dispatch");
+    const storeSpy = vi.spyOn(supportStore, "getIdentifier");
 
     await supportBtn.trigger("click");
 
     await flushPromises();
 
     expect(windowOpenMock).not.toHaveBeenCalled();
-    expect(storeDispatchMock).toHaveBeenCalledWith("support/get", "fake-tenant-data");
+    expect(storeSpy).toHaveBeenCalledWith("fake-tenant-data");
   });
 });

ui/tests/store/modules/support.spec.ts

@@ -1,13 +1,31 @@
-import { describe, expect, it } from "vitest";
-import { store } from "@/store";
+import { createPinia, setActivePinia } from "pinia";
+import { describe, expect, it, vi } from "vitest";
+import MockAdapter from "axios-mock-adapter";
+import { namespacesApi } from "@/api/http";
+import useSupportStore from "@/store/modules/support";
+
+vi.mock("@productdevbook/chatwoot/vue", () => ({
+  useChatWoot: () => ({
+    reset: vi.fn(),
+  }),
+}));
 
 describe("Support Store", () => {
-  it("Returns support with default variables", () => {
-    expect(store.getters["support/getIdentifier"]).toEqual("");
+  const mockNamespacesApi = new MockAdapter(namespacesApi.getAxios());
+  setActivePinia(createPinia());
+  const supportStore = useSupportStore();
+
+  it("should have initial state values", () => {
+    expect(supportStore.identifier).toEqual("");
+    expect(supportStore.isChatCreated).toEqual(false);
   });
 
-  it("Commits support mutations", () => {
-    store.commit("support/setIdentifier", "fake-identifier");
-    expect(store.getters["support/getIdentifier"]).toEqual("fake-identifier");
+  it("successfully gets identifier", async () => {
+    const mockResponse = { identifier: "fake-identifier" };
+    mockNamespacesApi.onGet("http://localhost:3000/api/namespaces/fake-tenant/support").reply(200, mockResponse);
+
+    await supportStore.getIdentifier("fake-tenant");
+
+    expect(supportStore.identifier).toEqual("fake-identifier");
   });
 });