feat: contact us

frontend/src/components/AppSidebar.vue

@@ -375,6 +375,18 @@ const addPrograms = async () => {
 	})
 }
 
+const addContactUsDetails = () => {
+	if (settingsStore.contactUsEmail?.data || settingsStore.contactUsURL?.data) {
+		sidebarLinks.value.push({
+			label: 'Contact Us',
+			icon: settingsStore.contactUsURL?.data ? 'Headset' : 'Mail',
+			to: settingsStore.contactUsURL?.data
+				? settingsStore.contactUsURL.data
+				: `mailto:${settingsStore.contactUsEmail?.data}`,
+		})
+	}
+}
+
 const checkIfCanAddProgram = async () => {
 	if (isModerator.value || isInstructor.value) {
 		return true
@@ -645,6 +657,7 @@ const setUpOnboarding = () => {
 }
 
 watch(userResource, () => {
+	addContactUsDetails()
 	if (userResource.data) {
 		isModerator.value = userResource.data.is_moderator
 		isInstructor.value = userResource.data.is_instructor

frontend/src/components/Settings/Settings.vue

@@ -161,6 +161,26 @@ const tabsStructure = computed(() => {
 						},
 					],
 				},
+				{
+					label: 'Contact Us',
+					icon: 'Phone',
+					fields: [
+						{
+							label: 'Email',
+							name: 'contact_us_email',
+							type: 'text',
+							description:
+								'Users can reach out to this email for support or inquiries.',
+						},
+						{
+							label: 'URL',
+							name: 'contact_us_url',
+							type: 'text',
+							description:
+								'Users can reach out to this URL for support or inquiries.',
+						},
+					],
+				},
 			],
 		},
 		{

frontend/src/components/SidebarLink.vue

@@ -88,6 +88,13 @@ function handleClick() {
 	if (router.hasRoute(props.link.to)) {
 		router.push({ name: props.link.to })
 	} else if (props.link.to) {
+		if (
+			props.link.to.startsWith('http') ||
+			props.link.to.startsWith('mailto:')
+		) {
+			window.open(props.link.to, '_blank')
+			return
+		}
 		window.location.href = `/${props.link.to}`
 	}
 }

frontend/src/stores/settings.js

@@ -21,6 +21,20 @@ export const useSettings = defineStore('settings', () => {
 		cache: ['preventSkippingVideos'],
 	})
 
+	const contactUsEmail = createResource({
+		url: 'lms.lms.api.get_lms_setting',
+		params: { field: 'contact_us_email' },
+		auto: true,
+		cache: ['contactUsEmail'],
+	})
+
+	const contactUsURL = createResource({
+		url: 'lms.lms.api.get_lms_setting',
+		params: { field: 'contact_us_url' },
+		auto: true,
+		cache: ['contactUsURL'],
+	})
+
 	const sidebarSettings = createResource({
 		url: 'lms.lms.api.get_sidebar_settings',
 		cache: 'Sidebar Settings',
@@ -32,6 +46,8 @@ export const useSettings = defineStore('settings', () => {
 		activeTab,
 		allowGuestAccess,
 		preventSkippingVideos,
+		contactUsEmail,
+		contactUsURL,
 		sidebarSettings,
 	}
 })