1import { computed, h, markRaw, ref } from "vue";
2import Agents from "./Agents.vue";
3import EmailConfig from "./EmailConfig.vue";
4import TeamsConfig from "./Teams/TeamsConfig.vue";
5import Sla from "./Sla/Sla.vue";
6import HolidayList from "./Holiday/Holiday.vue";
7import FieldDependencyConfig from "./FieldDependency/FieldDependencyConfig.vue";
8import InviteAgents from "./InviteAgents.vue";
9import LucideMail from "~icons/lucide/mail";
10import LucideMailOpen from "~icons/lucide/mail-open";
11import LucideUser from "~icons/lucide/user";
12import LucideUserPlus from "~icons/lucide/user-plus";
13import LucideUsers from "~icons/lucide/users";
14import ShieldCheck from "~icons/lucide/shield-check";
15import Briefcase from "~icons/lucide/briefcase";
16import AssignmentRules from "./Assignment Rules/AssignmentRules.vue";
17import Settings from "~icons/lucide/settings-2";
18import {
19 ERPNextSettingsIcon,
20 FieldDependencyIcon,
21 PhoneIcon,
22 SlidersIcon,
23} from "@/components/icons";
24import ERPNextIntegrationSettings from "@/components/erpnext-integration/ERPNextIntegrationSettings.vue";
25import TelephonyPage from "./Telephony/TelephonyPage.vue";
26import { EmailNotifications } from "./EmailNotifications";
27import { __ } from "@/translation";
28import SavedReplies from "./SavedReplies/SavedReplies.vue";
29import { Avatar } from "frappe-ui";
30import { useAuthStore } from "@/stores/auth";
31import General from "./General/General.vue";
32import KnowledgeBase from "./KnowledgeBase/KnowledgeBase.vue";
33import PortalPermissions from "./Customers/PortalPermissions.vue";
34import LucideUserCog from "~icons/lucide/user-cog";
35import LucideBookOpen from "~icons/lucide/book-open";
36import SettingsGear from "~icons/lucide/settings";
37import ZapIcon from "~icons/lucide/zap";
38import ProfilePage from "./Profile/ProfilePage.vue";
39import Preferences from "./Preferences/Preferences.vue";
40
41export const showSettingsModal = ref(false);
42
43const auth = useAuthStore();
44
45export const tabs = computed(() => {
46 const _tabs = [
47 {
48 label: __("My settings"),
49 hideLabel: true,
50 noborder: true,
51 items: [
52 {
53 label: __("Profile"),
54 icon: h(Avatar, {
55 image: auth.userImage,
56 label: auth.userName,
57 size: "xs",
58 }),
59 component: markRaw(ProfilePage),
60 },
61 {
62 label: __("Preferences"),
63 icon: markRaw(SlidersIcon),
64 component: markRaw(Preferences),
65 },
66 ],
67 },
68 {
69 label: __("Email Settings"),
70 condition: () => auth.isAdmin || auth.isManager,
71 items: [
72 {
73 label: __("Email Accounts"),
74 icon: markRaw(LucideMail),
75 component: markRaw(EmailConfig),
76 },
77 {
78 label: __("Email Notifications"),
79 icon: markRaw(LucideMailOpen),
80 component: markRaw(EmailNotifications),
81 },
82 ],
83 },
84 {
85 label: __("App Settings"),
86 items: [
87 {
88 label: __("General"),
89 icon: markRaw(SettingsGear),
90 component: markRaw(General),
91 condition: () => auth.isAdmin,
92 },
93 {
94 label: __("Agents"),
95 icon: markRaw(LucideUser),
96 component: markRaw(Agents),
97 condition: () => auth.isAdmin || auth.isManager,
98 },
99 {
100 label: __("Invite Agents"),
101 icon: markRaw(LucideUserPlus),
102 component: markRaw(InviteAgents),
103 condition: () => auth.isAdmin || auth.isManager,
104 },
105 {
106 label: __("Teams"),
107 icon: markRaw(LucideUsers),
108 component: markRaw(TeamsConfig),
109 condition: () => auth.isAdmin || auth.isManager,
110 },
111 {
112 label: __("SLA Policies"),
113 icon: markRaw(ShieldCheck),
114 component: markRaw(Sla),
115 condition: () => auth.isAdmin || auth.isManager,
116 },
117 {
118 label: __("Business Holidays"),
119 icon: markRaw(Briefcase),
120 component: markRaw(HolidayList),
121 condition: () => auth.isAdmin || auth.isManager,
122 },
123 {
124 label: __("Assignment Rules"),
125 icon: markRaw(h(Settings, { class: "rotate-90" })),
126 component: markRaw(AssignmentRules),
127 condition: () => auth.isAdmin || auth.isManager,
128 },
129 {
130 label: __("Field Dependencies"),
131 icon: markRaw(FieldDependencyIcon),
132 component: markRaw(FieldDependencyConfig),
133 condition: () => auth.isAdmin || auth.isManager,
134 },
135 {
136 label: __("Saved Replies"),
137 icon: markRaw(ZapIcon),
138 component: markRaw(SavedReplies),
139 },
140 ],
141 },
142 {
143 label: __("Customer Portal"),
144 condition: () => auth.isAdmin || auth.isManager,
145 items: [
146 {
147 label: __("Portal Settings"),
148 icon: markRaw(LucideUserCog),
149 component: markRaw(PortalPermissions),
150 },
151 {
152 label: __("Knowledge Base"),
153 icon: markRaw(LucideBookOpen),
154 component: markRaw(KnowledgeBase),
155 },
156 ],
157 },
158 {
159 label: __("Integrations"),
160 items: [
161 {
162 label: __("Telephony"),
163 icon: markRaw(PhoneIcon),
164 component: markRaw(TelephonyPage),
165 },
166 {
167 label: __("ERPNext"),
168 icon: markRaw(ERPNextSettingsIcon),
169 component: markRaw(ERPNextIntegrationSettings),
170 condition: () => auth.isAdmin || auth.isManager,
171 },
172 ],
173 },
174 ];
175
176 return _tabs.filter((tab) => {
177 if (tab.condition && !tab.condition()) return false;
178 if (tab.items) {
179 tab.items = tab.items.filter((item) => {
180 if (item.condition && !item.condition()) return false;
181 return true;
182 });
183 }
184 return true;
185 });
186});
187
188export const activeTab = ref(tabs.value[0].items[0]);
189
190export const nextActiveTab = ref(null);
191
192export const disableSettingModalOutsideClick = ref(false);
193
194type TabName =
195 | "Profile"
196 | "Preferences"
197 | "Email Accounts"
198 | "Email Notifications"
199 | "General"
200 | "Knowledge Base"
201 | "Portal Settings"
202 | "Agents"
203 | "Invite Agents"
204 | "Teams"
205 | "SLA Policies"
206 | "Business Holidays"
207 | "Assignment Rules"
208 | "Field Dependencies"
209 | "Telephony"
210 | "ERPNext"
211 | "Saved Replies";
212
213export const setActiveSettingsTab = (tabName: TabName) => {
214 activeTab.value =
215 (tabName &&
216 tabs.value
217 .map((tab) => tab.items)
218 .flat()
219 .find((tab) => tab.label == __(tabName))) ||
220 tabs.value[0].items[0];
221};
222