From 6830c3273fa35a10edee8a0be61bc3620a141513 Mon Sep 17 00:00:00 2001
From: Tanmay Deep Sharma <tanmaydeepsharma21@gmail.com>
Date: Mon, 20 Jul 2026 11:28:41 +0530
Subject: [PATCH] feat(automations): show what ends the wait in the builder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Make the wait's interrupt explicit (as Intercom does) so users can predict when the
rule runs. An "Ends the wait if …" line adapts to the rule's episode: status change
for conversation rules, customer reply for outgoing message rules, agent reply for
incoming ones — plus "or the conditions no longer match" universally. Behaviour is
unchanged; this only surfaces it.
---
 .../dashboard/i18n/locale/en/automation.json  |  9 +++++-
 .../automation/AutomationRuleForm.vue         | 32 +++++++++++++++++--
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/automation.json b/app/javascript/dashboard/i18n/locale/en/automation.json
index 41441b1bd..6fdc55314 100644
--- a/app/javascript/dashboard/i18n/locale/en/automation.json
+++ b/app/javascript/dashboard/i18n/locale/en/automation.json
@@ -37,7 +37,14 @@
             "DAYS": "Days"
           },
           "ERROR": "Wait must be between 10 minutes and 30 days",
-          "HELP_TEXT": "The rule waits, then runs only if its conditions still hold — and applies to conversations with activity after the rule is created."
+          "ENDS_IF_LABEL": "Ends the wait if",
+          "ENDS_IF": {
+            "STATUS": "the conversation's status changes, or its conditions no longer match.",
+            "CUSTOMER_REPLY": "the customer replies, or the conditions no longer match.",
+            "AGENT_REPLY": "an agent replies, or the conditions no longer match.",
+            "GENERIC": "there is a new reply on the conversation, or the conditions no longer match."
+          },
+          "HELP_TEXT": "Only applies to conversations with activity after the rule is created."
         },
         "CONDITIONS": {
           "LABEL": "Conditions"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue
index 22a887a24..d59aaf62e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleForm.vue
@@ -237,6 +237,24 @@ const delayRestrictionReason = computed(() => {
 
 const isDelaySupported = computed(() => delayRestrictionReason.value === null);
 
+// What ends the wait, mirroring the backend episode that arms the rule. Shown to the user so
+// they can predict when the rule runs. Conversation rules key on status; message rules key on
+// the reply that ends the wait (customer reply for outgoing, agent reply for incoming).
+const waitEndsKey = computed(() => {
+  if (eventName.value !== 'message_created') return 'STATUS';
+  const messageType = (automation.value?.conditions || []).find(
+    condition => condition.attribute_key === 'message_type'
+  );
+  const raw = Array.isArray(messageType?.values)
+    ? messageType.values[0]
+    : messageType?.values;
+  // Raw create-mode values are strings ('outgoing'); edit-mode values are option objects.
+  const value = raw && typeof raw === 'object' ? raw.id : raw;
+  if (value === 'outgoing') return 'CUSTOMER_REPLY';
+  if (value === 'incoming') return 'AGENT_REPLY';
+  return 'GENERIC';
+});
+
 const delayValue = ref(4);
 const delayUnit = ref('HOURS');
 
@@ -488,9 +506,17 @@ defineExpose({ open, close });
         >
           {{ $t('AUTOMATION.ADD.FORM.EXECUTE.ERROR') }}
         </span>
-        <p v-else-if="isDelayed" class="text-xs text-n-slate-11 pt-1 mb-0">
-          {{ $t('AUTOMATION.ADD.FORM.EXECUTE.HELP_TEXT') }}
-        </p>
+        <template v-else-if="isDelayed">
+          <p class="text-xs text-n-slate-11 pt-2 mb-0">
+            <span class="text-n-slate-12 font-medium">
+              {{ $t('AUTOMATION.ADD.FORM.EXECUTE.ENDS_IF_LABEL') }}
+            </span>
+            {{ $t(`AUTOMATION.ADD.FORM.EXECUTE.ENDS_IF.${waitEndsKey}`) }}
+          </p>
+          <p class="text-xs text-n-slate-11 pt-1 mb-0">
+            {{ $t('AUTOMATION.ADD.FORM.EXECUTE.HELP_TEXT') }}
+          </p>
+        </template>
       </div>
       <!-- Wait End -->
       <!-- Actions Start -->