feat: allow auto resolve waiting option (#11436)

app/javascript/dashboard/i18n/locale/en/generalSettings.json

@@ -46,7 +46,7 @@
       },
       "AUTO_RESOLVE": {
         "TITLE": "Auto-resolve conversations",
-        "NOTE": "This configuration would allow you to automatically end the conversation after a certain period. Set the duration and customize the message to the user below."
+        "NOTE": "This configuration would allow you to automatically resolve the conversation after a certain period. Set the duration and customize the message to the user below."
       },
       "NAME": {
         "LABEL": "Account name",
@@ -68,16 +68,20 @@
         "PLACEHOLDER": "Your company's support email",
         "ERROR": ""
       },
+      "AUTO_RESOLVE_IGNORE_WAITING": {
+        "LABEL": "Exclude unattended conversations",
+        "HELP": "If toggled, the system will not resolve conversations that have been waiting for an agent reply."
+      },
       "AUTO_RESOLVE_DURATION": {
         "LABEL": "Inactivity duration for resolution",
         "HELP": "Duration after a conversation should auto resolve if there is no activity",
         "PLACEHOLDER": "30",
-        "ERROR": "Please enter a valid auto resolve duration (minimum 1 day and maximum 999 days)",
+        "ERROR": "Auto resolve duration should be between 10 minutes and 999 days",
         "API": {
           "SUCCESS": "Auto resolve settings updated successfully",
           "ERROR": "Failed to update auto resolve settings"
         },
-        "UPDATE_BUTTON": "Update Auto-resolve",
+        "UPDATE_BUTTON": "Update",
         "MESSAGE_LABEL": "Custom resolution message",
         "MESSAGE_PLACEHOLDER": "Conversation was marked resolved by system due to 15 days of inactivity",
         "MESSAGE_HELP": "This message is sent to the customer when a conversation is automatically resolved by the system due to inactivity."

app/javascript/dashboard/routes/dashboard/settings/account/components/AutoResolve.vue

@@ -13,6 +13,7 @@ import NextButton from 'dashboard/components-next/button/Button.vue';
 const { t } = useI18n();
 const duration = ref(0);
 const message = ref('');
+const ignoreWaiting = ref(false);
 const isEnabled = ref(false);
 
 const { currentAccount, updateAccount } = useAccount();
@@ -20,11 +21,15 @@ const { currentAccount, updateAccount } = useAccount();
 watch(
   currentAccount,
   () => {
-    const { auto_resolve_after, auto_resolve_message } =
-      currentAccount.value?.settings || {};
+    const {
+      auto_resolve_after,
+      auto_resolve_message,
+      auto_resolve_ignore_waiting,
+    } = currentAccount.value?.settings || {};
 
     duration.value = auto_resolve_after;
     message.value = auto_resolve_message;
+    ignoreWaiting.value = auto_resolve_ignore_waiting;
 
     if (duration.value) {
       isEnabled.value = true;
@@ -43,9 +48,15 @@ const updateAccountSettings = async settings => {
 };
 
 const handleSubmit = async () => {
+  if (duration.value < 10) {
+    useAlert(t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR'));
+    return Promise.resolve();
+  }
+
   return updateAccountSettings({
     auto_resolve_after: duration.value,
     auto_resolve_message: message.value,
+    auto_resolve_ignore_waiting: ignoreWaiting.value,
   });
 };
 
@@ -56,6 +67,7 @@ const handleDisable = async () => {
   return updateAccountSettings({
     auto_resolve_after: null,
     auto_resolve_message: '',
+    auto_resolve_ignore_waiting: false,
   });
 };
 
@@ -76,7 +88,7 @@ const toggleAutoResolve = async () => {
       </div>
     </template>
 
-    <form class="grid gap-4" @submit.prevent="handleSubmit">
+    <form class="grid gap-5" @submit.prevent="handleSubmit">
       <WithLabel
         :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL')"
         :help-message="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.HELP')"
@@ -85,7 +97,7 @@ const toggleAutoResolve = async () => {
           <!-- allow 10 mins to 999 days -->
           <DurationInput
             v-model="duration"
-            min="10"
+            min="0"
             max="1439856"
             class="w-full"
           />
@@ -105,6 +117,16 @@ const toggleAutoResolve = async () => {
           "
         />
       </WithLabel>
+      <WithLabel
+        :label="t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_IGNORE_WAITING.LABEL')"
+      >
+        <template #rightOfLabel>
+          <Switch v-model="ignoreWaiting" />
+        </template>
+        <p class="text-sm ml-px text-n-slate-10 max-w-lg">
+          {{ t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_IGNORE_WAITING.HELP') }}
+        </p>
+      </WithLabel>
       <div class="flex gap-2">
         <NextButton
           blue

app/javascript/dashboard/routes/dashboard/settings/account/components/SectionLayout.vue

@@ -17,7 +17,7 @@ defineProps({
 
 <template>
   <section
-    class="grid grid-cols-1 py-8 gap-10"
+    class="grid grid-cols-1 py-8 gap-8"
     :class="{ 'border-t border-n-weak': withBorder }"
   >
     <header class="grid grid-cols-4">
@@ -25,7 +25,7 @@ defineProps({
         <h4 class="text-lg font-medium text-n-slate-12">
           <slot name="title">{{ title }}</slot>
         </h4>
-        <p class="text-n-slate-11">
+        <p class="text-n-slate-11 text-sm mt-2">
           <slot name="description">{{ description }}</slot>
         </p>
       </div>

app/javascript/v3/components/Form/WithLabel.vue

@@ -34,13 +34,13 @@ defineProps({
       </div>
       <div
         v-if="errorMessage && hasError"
-        class="text-xs mt-2 ml-px text-n-ruby-9 leading-tight"
+        class="text-sm mt-1.5 ml-px text-n-ruby-9 leading-tight"
       >
         {{ errorMessage }}
       </div>
       <div
         v-else-if="helpMessage || $slots.help"
-        class="text-xs mt-2 ml-px text-n-slate-10 leading-tight"
+        class="text-sm mt-1.5 ml-px text-n-slate-10 leading-tight"
       >
         <slot name="help">
           {{ helpMessage }}