feat: contact us email modal

frontend/components.d.ts

@@ -42,6 +42,7 @@ declare module 'vue' {
     CodeEditor: typeof import('./src/components/Controls/CodeEditor.vue')['default']
     CollapseSidebar: typeof import('./src/components/Icons/CollapseSidebar.vue')['default']
     ColorSwatches: typeof import('./src/components/Controls/ColorSwatches.vue')['default']
+    ContactUsEmail: typeof import('./src/components/ContactUsEmail.vue')['default']
     CourseCard: typeof import('./src/components/CourseCard.vue')['default']
     CourseCardOverlay: typeof import('./src/components/CourseCardOverlay.vue')['default']
     CourseInstructors: typeof import('./src/components/CourseInstructors.vue')['default']

frontend/src/components/AppSidebar.vue

@@ -9,12 +9,12 @@
 		>
 			<UserDropdown :isCollapsed="sidebarStore.isSidebarCollapsed" />
 			<div class="flex flex-col" v-if="sidebarSettings.data">
-				<SidebarLink
+				<div v-for="link in sidebarLinks" class="mx-2 my-0.5">
-					v-for="link in sidebarLinks"
+					<SidebarLink
-					:link="link"
+						:link="link"
-					:isCollapsed="sidebarStore.isSidebarCollapsed"
+						:isCollapsed="sidebarStore.isSidebarCollapsed"
-					class="mx-2 my-0.5"
+					/>
-				/>
+				</div>
 			</div>
 			<div
 				v-if="sidebarSettings.data?.web_pages?.length || isModerator"
@@ -54,15 +54,18 @@
 					class="flex flex-col transition-all duration-300 ease-in-out"
 					:class="!sidebarStore.isWebpagesCollapsed ? 'block' : 'hidden'"
 				>
-					<SidebarLink
+					<div
 						v-for="link in sidebarSettings.data.web_pages"
-						:link="link"
-						:isCollapsed="sidebarStore.isSidebarCollapsed"
 						class="mx-2 my-0.5"
-						:showControls="isModerator ? true : false"
+					>
-						@openModal="openPageModal"
+						<SidebarLink
-						@deletePage="deletePage"
+							:link="link"
-					/>
+							:isCollapsed="sidebarStore.isSidebarCollapsed"
+							:showControls="isModerator ? true : false"
+							@openModal="openPageModal"
+							@deletePage="deletePage"
+						/>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -382,7 +385,7 @@ const addContactUsDetails = () => {
 			icon: settingsStore.contactUsURL?.data ? 'Headset' : 'Mail',
 			to: settingsStore.contactUsURL?.data
 				? settingsStore.contactUsURL.data
-				: `mailto:${settingsStore.contactUsEmail?.data}`,
+				: settingsStore.contactUsEmail?.data,
 		})
 	}
 }

frontend/src/components/ContactUsEmail.vue

@@ -0,0 +1,67 @@
+<template>
+	<Dialog
+		v-model="show"
+		:options="{
+			title: __('Contact Us'),
+			size: 'md',
+		}"
+	>
+		<template #body-content>
+			<div class="flex flex-col gap-4">
+				<FormControl
+					v-model="subject"
+					:label="__('Subject')"
+					type="text"
+					:required="true"
+				/>
+				<div>
+					<div class="mb-1.5 text-sm text-ink-gray-5">
+						{{ __('Message') }}
+						<span class="text-ink-red-3">*</span>
+					</div>
+					<TextEditor
+						:fixedMenu="true"
+						@change="(val) => (message = val)"
+						editorClass="prose-sm py-2 px-2 min-h-[200px] border-outline-gray-2 hover:border-outline-gray-3 rounded-b-md bg-surface-gray-3"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #actions="{ close }">
+			<div class="pb-5 float-right">
+				<Button variant="solid" @click="sendMail(close)">
+					{{ __('Send') }}
+				</Button>
+			</div>
+		</template>
+	</Dialog>
+</template>
+<script setup lang="ts">
+import { Button, call, Dialog, FormControl, TextEditor, toast } from 'frappe-ui'
+import { ref } from 'vue'
+import { useSettings } from '@/stores/settings'
+
+const show = defineModel<boolean>({ required: true, default: false })
+const subject = ref('')
+const message = ref('')
+const settingsStore = useSettings()
+
+const sendMail = (close: Function) => {
+	call('frappe.core.doctype.communication.email.make', {
+		recipients: settingsStore.contactUsEmail?.data,
+		subject: subject.value,
+		content: message.value,
+		send_email: true,
+	})
+		.then(() => {
+			toast.success(__('Email sent successfully'))
+			close()
+			subject.value = ''
+			message.value = ''
+		})
+		.catch(() => {
+			toast.error(__('Failed to send email'))
+			close()
+		})
+}
+</script>

frontend/src/components/SidebarLink.vue

@@ -1,7 +1,7 @@
 <template>
 	<button
 		v-if="link && !link.onlyMobile"
-		class="flex h-7 cursor-pointer items-center rounded text-ink-gray-8 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+		class="flex w-full h-7 cursor-pointer items-center rounded text-ink-gray-8 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-outline-gray-3"
 		:class="
 			isActive ? 'bg-surface-selected shadow-sm' : 'hover:bg-surface-gray-2'
 		"
@@ -59,15 +59,18 @@
 			</div>
 		</div>
 	</button>
+	<ContactUsEmail v-model="showContactForm" />
 </template>
 <script setup>
 import { Tooltip } from 'frappe-ui'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import contactUsEmail from '@/components/ContactUsEmail.vue'
 import * as icons from 'lucide-vue-next'
 
 const router = useRouter()
 const emit = defineEmits(['openModal', 'deletePage'])
+const showContactForm = ref(false)
 
 const props = defineProps({
 	link: {
@@ -85,13 +88,12 @@ const props = defineProps({
 })
 
 function handleClick() {
-	if (router.hasRoute(props.link.to)) {
+	if (props.link.to.includes('@')) {
+		showContactForm.value = true
+	} else if (router.hasRoute(props.link.to)) {
 		router.push({ name: props.link.to })
 	} else if (props.link.to) {
-		if (
+		if (props.link.to.startsWith('http')) {
-			props.link.to.startsWith('http') ||
-			props.link.to.startsWith('mailto:')
-		) {
 			window.open(props.link.to, '_blank')
 			return
 		}