feat(automations): show what ends the wait in the builder

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.
This commit is contained in:
Tanmay Deep Sharma
2026-07-20 11:28:41 +05:30
parent 2c728341e0
commit 6830c3273f
2 changed files with 37 additions and 4 deletions
@@ -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"
@@ -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 -->