refactor: isCustomerPortal variable

desk/src/components/layouts/MobileSidebar.vue

@@ -82,21 +82,19 @@ import { useNotificationStore } from "@/stores/notification";
 import { mobileSidebarOpened as sidebarOpened } from "@/composables/mobile";
 import LucideBell from "~icons/lucide/bell";
 
-import { CUSTOMER_PORTAL_LANDING, CUSTOMER_PORTAL_ROUTES } from "@/router";
+import { CUSTOMER_PORTAL_LANDING } from "@/router";
 import Apps from "../Apps.vue";
 import {
   agentPortalSidebarOptions,
   customerPortalSidebarOptions,
 } from "./layoutSettings";
 import { useAuthStore } from "@/stores/auth";
+import { isCustomerPortal } from "@/utils";
 
 const notificationStore = useNotificationStore();
 const route = useRoute();
 const router = useRouter();
 const authStore = useAuthStore();
-const isCustomerPortal = computed(() =>
-  CUSTOMER_PORTAL_ROUTES.includes(route.name)
-);
 
 const menuOptions = computed(() => {
   return isCustomerPortal.value

desk/src/components/layouts/Sidebar.vue

@@ -74,7 +74,7 @@ import { storeToRefs } from "pinia";
 import { useAuthStore } from "@/stores/auth";
 import { useNotificationStore } from "@/stores/notification";
 import { useSidebarStore } from "@/stores/sidebar";
-import { CUSTOMER_PORTAL_LANDING, CUSTOMER_PORTAL_ROUTES } from "@/router";
+import { CUSTOMER_PORTAL_LANDING } from "@/router";
 import { useDevice } from "@/composables";
 import { SidebarLink } from "@/components";
 import UserMenu from "@/components/UserMenu.vue";
@@ -84,6 +84,7 @@ import LucideBell from "~icons/lucide/bell";
 import LucideSearch from "~icons/lucide/search";
 import SettingsModal from "@/components/Settings/SettingsModal.vue";
 import Apps from "@/components/Apps.vue";
+import { isCustomerPortal } from "@/utils";
 import {
   agentPortalSidebarOptions,
   customerPortalSidebarOptions,
@@ -96,10 +97,9 @@ const notificationStore = useNotificationStore();
 const { isExpanded, width } = storeToRefs(useSidebarStore());
 const device = useDevice();
 const showSettingsModal = ref(false);
-const isCustomerPortal = route.meta.public ?? false;
 
 const menuOptions = computed(() => {
-  return isCustomerPortal
+  return isCustomerPortal.value
     ? customerPortalSidebarOptions
     : agentPortalSidebarOptions;
 });
@@ -148,7 +148,7 @@ const agentPortalDropdown = computed(() => [
 ]);
 
 const profileSettings = computed(() => {
-  return isCustomerPortal
+  return isCustomerPortal.value
     ? customerPortalDropdown.value
     : agentPortalDropdown.value;
 });

desk/src/components/ticket/TicketsListView.vue

@@ -212,17 +212,14 @@ import {
   Dropdown,
 } from "frappe-ui";
 import { MultipleAvatar, StarRating } from "@/components";
-import { useRoute } from "vue-router";
+import { isCustomerPortal } from "@/utils";
 
 const ticketStatusStore = useTicketStatusStore();
 const showExportDialog = ref(false);
 const export_type = ref("Excel");
 const export_all = ref(false);
 let selectedRows;
 
-const route = useRoute();
-const isCustomerPortal = route.meta.public;
-
 const props = defineProps({
   columns: {
     type: Array, //TODO custom types

desk/src/pages/TicketNew.vue

@@ -114,6 +114,7 @@ import SearchArticles from "../components/SearchArticles.vue";
 import TicketTextEditor from "./ticket/TicketTextEditor.vue";
 import { useAuthStore } from "@/stores/auth";
 import { capture } from "@/telemetry";
+import { isCustomerPortal } from "@/utils";
 
 interface P {
   templateId?: string;
@@ -130,8 +131,6 @@ const description = ref("");
 const attachments = ref([]);
 const templateFields = reactive({});
 
-const isCustomerPortal = window.location.pathname.includes("/my-tickets");
-
 const template = createResource({
   url: "helpdesk.helpdesk.doctype.hd_ticket_template.api.get_one",
   makeParams: () => ({
@@ -173,7 +172,7 @@ const ticket = createResource({
         ticketId: data.name,
       },
     });
-    if (!isCustomerPortal) return;
+    if (!isCustomerPortal.value) return;
     // only capture telemetry for customer portal
     capture("new_ticket_submitted", {
       data: {

desk/src/pages/Tickets.vue

@@ -56,17 +56,17 @@ import { createResource, Breadcrumbs, usePageMeta } from "frappe-ui";
 import { TicketsListView } from "@/components/ticket";
 import { ViewControls, LayoutHeader } from "@/components";
 import { useUserStore } from "@/stores/user";
-import { useRoute } from "vue-router";
 import { socket } from "@/socket";
-const { getUser } = useUserStore();
+import { isCustomerPortal } from "@/utils";
 
-const route = useRoute();
-const isCustomerPortal: boolean = route.meta.public ?? false;
+const { getUser } = useUserStore();
 
 const breadcrumbs = [
   {
     label: "Tickets",
-    route: { name: isCustomerPortal ? "TicketsCustomer" : "TicketsAgent" },
+    route: {
+      name: isCustomerPortal.value ? "TicketsCustomer" : "TicketsAgent",
+    },
   },
 ];
 let storage = useStorage("tickets_agent", {
@@ -100,12 +100,12 @@ const tickets = createResource({
     page_length: pageLength.value,
     columns: columns.length ? columns : undefined,
     rows: rows.length ? rows : undefined,
-    show_customer_portal_fields: isCustomerPortal,
+    show_customer_portal_fields: isCustomerPortal.value,
   },
   auto: true,
   transform(data) {
     data.data.forEach((row) => {
-      if (isCustomerPortal) {
+      if (isCustomerPortal.value) {
         if (row.status == "Replied") {
           row.status = "Awaiting Response";
         }
@@ -313,7 +313,7 @@ function apply() {
       doctype: "HD Ticket",
       columns: columns.length ? columns : undefined,
       rows: rows.length ? rows : undefined,
-      show_customer_portal_fields: isCustomerPortal,
+      show_customer_portal_fields: isCustomerPortal.value,
     },
   });
 
@@ -327,7 +327,7 @@ const filterableFields = createResource({
   params: {
     doctype: "HD Ticket",
     append_assign: true,
-    show_customer_portal_fields: isCustomerPortal,
+    show_customer_portal_fields: isCustomerPortal.value,
   },
   transform: (data) => {
     return data
@@ -358,7 +358,7 @@ const sortableFields = createResource({
   auto: true,
   params: {
     doctype: "HD Ticket",
-    show_customer_portal_fields: isCustomerPortal,
+    show_customer_portal_fields: isCustomerPortal.value,
   },
 });
 

desk/src/pages/knowledge-base/Article.vue

@@ -6,7 +6,7 @@
           <Breadcrumbs :items="breadcrumbs" />
         </div>
       </template>
-      <template #right-header>
+      <template #right-header v-if="!isCustomerPortal">
         <!-- Default Buttons -->
         <div class="flex gap-2" v-if="!editable">
           <Button
@@ -48,14 +48,14 @@
                 {{ dayjs(article.data.modified).short() }}
               </div>
             </div>
-            <Dropdown :options="options" v-if="!editable">
+            <Dropdown :options="options" v-if="!editable && !isCustomerPortal">
               <Button variant="ghost">
                 <template #icon>
                   <IconMoreHorizontal class="h-4 w-4" />
                 </template>
               </Button>
             </Dropdown>
-            <div class="flex gap-2" v-else>
+            <div class="flex gap-2" v-if="editable">
               <DiscardButton
                 :hide-dialog="!isDirty"
                 title="Discard changes?"
@@ -134,7 +134,12 @@ import MoveToCategoryModal from "@/components/knowledge-base/MoveToCategoryModal
 import DiscardButton from "@/components/DiscardButton.vue";
 import ArticleFeedback from "@/components/knowledge-base/ArticleFeedback.vue";
 import { Resource, Article, FeedbackAction } from "@/types";
-import { createToast, textEditorMenuButtons, copyToClipboard } from "@/utils";
+import {
+  createToast,
+  textEditorMenuButtons,
+  copyToClipboard,
+  isCustomerPortal,
+} from "@/utils";
 import { capture } from "@/telemetry";
 import { PreserveIds } from "@/tiptap-extensions";
 import IconMoreHorizontal from "~icons/lucide/more-horizontal";

desk/src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { useUserStore } from "@/stores/user";
-
+import { isCustomerPortal } from "@/utils";
 import { useScreenSize } from "@/composables/screen";
 const { isMobileView } = useScreenSize();
 
@@ -118,6 +118,7 @@ const routes = [
       auth: true,
       agent: true,
       admin: false,
+      public: false,
     },
     children: [
       {
@@ -216,7 +217,7 @@ export const router = createRouter({
 
 router.beforeEach(async (to, _, next) => {
   const authStore = useAuthStore();
-
+  isCustomerPortal.value = to.meta.public;
   if (authStore.isLoggedIn) {
     await authStore.init();
   }
@@ -229,8 +230,7 @@ router.beforeEach(async (to, _, next) => {
 });
 
 router.afterEach(async (to) => {
-  const isCustomerPortal = to.meta.public ?? false;
-  if (isCustomerPortal) return;
+  if (to.meta.public) return;
   const userStore = useUserStore();
   await userStore.users.fetch();
 });

desk/src/utils.ts

@@ -1,6 +1,6 @@
 import { useClipboard, useDateFormat, useTimeAgo } from "@vueuse/core";
 import { toast } from "frappe-ui";
-import { RouteLocation } from "vue-router";
+import { ref } from "vue";
 import zod from "zod";
 /**
  * Wrapper to create toasts, supplied with default options.
@@ -118,8 +118,7 @@ export function setupCustomActions(data, obj) {
   data._customActions = actions;
 }
 
-export const isCustomerPortal = (route: RouteLocation) =>
-  route.meta.public ?? false;
+export const isCustomerPortal = ref(false);
 
 export function copyToClipboard(text: string, message?: string) {
   navigator.clipboard.writeText(text);