feat: Support ticket variables in canned responses

desk/src/components/EmailEditor.vue

@@ -265,8 +265,40 @@ const bcc = computed(() => (bccEmailsClone.value?.length ? true : false));
 const ccInput = ref(null);
 const bccInput = ref(null);
 
-function applyCannedResponse(template) {
-  newEmail.value = template.message;
+const ticketDoc = createResource({
+  url: "frappe.client.get",
+  makeParams: () => ({
+    doctype: "HD Ticket",
+    name: props.ticketId,
+  }),
+});
+
+async function replaceVariables(templateMessage) {
+  let message = templateMessage;
+
+  let ticketDetailsData = (await ticketDoc.submit()) || {};
+
+  const context = {
+    ticket_no: props.ticketId,
+    ...ticketDetailsData,
+  };
+  const regex = /\{\{\s*(\w+)\s*\}\}/g;
+
+  message = message.replace(regex, (match, varName) => {
+    const value = context[varName];
+    return value !== undefined && value !== null ? String(value) : match;
+  });
+
+  return message;
+}
+
+async function applyCannedResponse(template) {
+  let message = template.message;
+
+  if (message.includes("{{")) {
+    message = await replaceVariables(message);
+  }
+  newEmail.value = message;
   showCannedResponseSelectorModal.value = false;
 }
 

desk/src/components/canned-response/CannedResponseModal.vue

@@ -37,7 +37,7 @@
             editor-class="!prose-sm overflow-auto min-h-[180px] max-h-80 py-1.5 px-2 rounded border border-gray-300 bg-white hover:border-gray-400 hover:shadow-sm focus:bg-white focus:border-gray-500 focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400 text-gray-800 transition-colors"
             :bubble-menu="true"
             :content="message"
-            :placeholder="'Your query has been resolved. Thank you for reaching out.'"
+            :placeholder="'Hi {\{ customer \}} Your {\{ ticket_no \}} query has been resolved. Thank you for reaching out.'"
             @change="(val) => (message = val)"
           />
         </div>