1<template>
2 <SettingsLayoutBase
3 :title="__('Email Notifications')"
4 :description="
5 __(
6 'Customize your email notification preferences to stay informed about important updates and activities.'
7 )
8 "
9 >
10 <template #content>
11 <ul class="isolate -ms-3">
12 <div
13 v-for="(notification, index) in notifications"
14 :key="notification.name"
15 >
16 <li class="flex items-center justify-between p-3 rounded-4 relative">
17 <div class="flex flex-col gap-1">
18 <h2
19 class="text-base-medium text-ink-gray-7 relative z-10 pointer-events-none"
20 >
21 {{ __(notification.label) }}
22 </h2>
23 <p
24 class="text-sm text-ink-gray-5 truncate relative z-10 pointer-events-none"
25 >
26 {{ __(notification.description) }}
27 </p>
28 </div>
29 <LucideChevronRight
30 class="text-ink-gray-7 size-4 relative z-10 pointer-events-none rtl:rotate-180"
31 />
32 <div
33 class="w-full h-full absolute top-0 start-0 hover:bg-surface-sidebar rounded-[inherit]"
34 @click="
35 () => {
36 props.onSelect(notification);
37 }
38 "
39 >
40 <span class="sr-only">{{
41 __("customize {0}", notification.name)
42 }}</span>
43 </div>
44 </li>
45 <hr v-if="index < notifications.length - 1" class="mx-2" />
46 </div>
47 </ul>
48 </template>
49 </SettingsLayoutBase>
50</template>
51
52<script setup lang="ts">
53import LucideChevronRight from "~icons/lucide/chevron-right";
54import { __ } from "@/translation";
55import type { AtLeastOneNotifcation, Notification } from "./types";
56import SettingsLayoutBase from "@/components/layouts/SettingsLayoutBase.vue";
57
58const props = defineProps<{
59 onSelect: (notification: Notification) => void;
60}>();
61
62const notifications: AtLeastOneNotifcation = [
63 {
64 name: "share_feedback",
65 label: __("Share feedback"),
66 description: __(
67 "Sent to the user who has raised the ticket after the ticket is closed or resolved."
68 ),
69 },
70 {
71 name: "acknowledgement",
72 label: __("Acknowledgement"),
73 description: __("Sent to the user right after creating an email ticket."),
74 },
75 {
76 name: "reply_to_agents",
77 label: __("Reply from contact"),
78 description: __(
79 "Sent to all of the agents assigned to the ticket whenever a contact has replied."
80 ),
81 },
82 {
83 name: "reply_via_agent",
84 label: __("Reply from agent"),
85 description: __(
86 "Sent to all of the recipients associated with the ticket whenever an agent has replied."
87 ),
88 },
89];
90</script>
91