feat: add support for {update} template variable to track and display submission changes

app/actions/submissions.ts

@@ -30,6 +30,7 @@ export async function submitForm(
 
   let submissionId = "";
   const isUpdate = !!existingSubmission;
+  let oldAnswersDict: Record<string, string> = {};
 
   if (existingSubmission) {
     submissionId = existingSubmission.id;
@@ -39,7 +40,7 @@ export async function submitForm(
       where: (a, { eq }) => eq(a.submissionId, submissionId),
     });
 
-    const oldAnswersDict = oldAnswersList.reduce((acc, curr) => {
+    oldAnswersDict = oldAnswersList.reduce((acc, curr) => {
       acc[curr.questionId] = curr.value;
       return acc;
     }, {} as Record<string, string>);
@@ -112,6 +113,19 @@ export async function submitForm(
         return acc;
       }, {} as Record<string, string>);
 
+      let updatesText = "";
+      if (isUpdate) {
+        const changed: string[] = [];
+        for (const ans of answersList) {
+          const oldVal = oldAnswersDict[ans.questionId];
+          if (oldVal !== ans.value) {
+            const qTitle = questionsList.find(q => q.id === ans.questionId)?.label || `Question`;
+            changed.push(`**${qTitle}**: \`${oldVal || "Empty"}\` ➡️ \`${ans.value || "Empty"}\``);
+          }
+        }
+        updatesText = changed.length > 0 ? changed.join("\n") : "No changes made.";
+      }
+
       let message = templateToUse;
       // Replace {1}, {2}, etc. with value, and new variables
       message = message.replace(/\{([^}]+)\}/g, (match: string, p1: string) => {
@@ -122,6 +136,9 @@ export async function submitForm(
         if (key === "id") {
           return discordId || "Unknown ID";
         }
+        if (key === "update") {
+          return updatesText;
+        }
         return answersDict[p1] || "Not Provided";
       });
 

app/admin/form/[id]/extra/client.tsx

@@ -192,7 +192,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="webhook-template">New Submission Template</Label>
+            <Label htmlFor="webhook-template">New Submission</Label>
             <Textarea
               id="webhook-template"
               value={webhookTemplate}
@@ -205,7 +205,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
             </p>
           </div>
           <div className="space-y-2">
-            <Label htmlFor="webhook-update-template">Update Submission Template</Label>
+            <Label htmlFor="webhook-update-template">Update Submission</Label>
             <Textarea
               id="webhook-update-template"
               value={webhookUpdateTemplate}
@@ -214,7 +214,7 @@ export default function FormExtraClient({ form }: FormExtraClientProps) {
               className="min-h-24"
             />
             <p className="text-sm text-muted-foreground">
-              Used when a user updates their existing submission. Use <code>{`{1}`}</code>, <code>{`{2}`}</code> for answers, and <code>{`{username}`}</code>, <code>{`{displayname}`}</code>, <code>{`{id}`}</code> for user info.
+              Used when a user updates their existing submission. Use <code>{`{1}`}</code>, <code>{`{2}`}</code> for answers, <code>{`{update}`}</code> to show what was changed, and <code>{`{username}`}</code>, <code>{`{displayname}`}</code>, <code>{`{id}`}</code> for user info.
             </p>
           </div>
         </CardContent>