fix: Update validations in automation edit actions (#4370)

Co-authored-by: fayazara <fayazara@gmail.com>

app/javascript/dashboard/components/widgets/AutomationActionInput.vue

@@ -18,7 +18,7 @@
           {{ attribute.label }}
         </option>
       </select>
-      <div class="filter__answer--wrap">
+      <div v-if="showActionInput" class="filter__answer--wrap">
         <div v-if="inputType">
           <div
             v-if="inputType === 'multi_select'"
@@ -89,6 +89,10 @@ export default {
       type: Object,
       default: () => null,
     },
+    showActionInput: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     action_name: {

app/javascript/dashboard/helper/actionQueryGenerator.js

@@ -1,8 +1,19 @@
+const formatArray = params => {
+  if (params.length <= 0) {
+    params = [];
+  } else if (params.every(elem => typeof elem === 'string')) {
+    params = [...params];
+  } else {
+    params = params.map(val => val.id);
+  }
+  return params;
+};
+
 const generatePayload = data => {
   const actions = JSON.parse(JSON.stringify(data));
   let payload = actions.map(item => {
     if (Array.isArray(item.action_params)) {
-      item.action_params = item.action_params.map(val => val.id);
+      item.action_params = formatArray(item.action_params);
     } else if (typeof item.values === 'object') {
       item.action_params = [item.action_params.id];
     } else if (!item.action_params) {

app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue

@@ -100,6 +100,9 @@
               :dropdown-values="
                 getActionDropdownValues(automation.actions[i].action_name)
               "
+              :show-action-input="
+                showActionInput(automation.actions[i].action_name)
+              "
               :v="$v.automation.actions.$each[i]"
               @resetAction="resetAction(i)"
               @removeAction="removeAction(i)"
@@ -413,14 +416,15 @@ export default {
     submitAutomation() {
       this.$v.$touch();
       if (this.$v.$invalid) return;
-      this.automation.conditions[
+      const automation = JSON.parse(JSON.stringify(this.automation));
-        this.automation.conditions.length - 1
+      automation.conditions[
+        automation.conditions.length - 1
       ].query_operator = null;
-      this.automation.conditions = filterQueryGenerator(
+      automation.conditions = filterQueryGenerator(
-        this.automation.conditions
+        automation.conditions
       ).payload;
-      this.automation.actions = actionQueryGenerator(this.automation.actions);
+      automation.actions = actionQueryGenerator(automation.actions);
-      this.$emit('saveAutomation', this.automation);
+      this.$emit('saveAutomation', automation);
     },
     resetFilter(index, currentCondition) {
       this.automation.conditions[index].filter_operator = this.automationTypes[
@@ -438,6 +442,13 @@ export default {
         return false;
       return true;
     },
+    showActionInput(actionName) {
+      const type = AUTOMATION_ACTION_TYPES.find(
+        action => action.key === actionName
+      ).inputType;
+      if (type === null) return false;
+      return true;
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue

@@ -97,6 +97,9 @@
               :dropdown-values="
                 getActionDropdownValues(automation.actions[i].action_name)
               "
+              :show-action-input="
+                showActionInput(automation.actions[i].action_name)
+              "
               :v="$v.automation.actions.$each[i]"
               @removeAction="removeAction(i)"
             />
@@ -192,7 +195,13 @@ export default {
         required,
         $each: {
           action_params: {
-            required,
+            required: requiredIf(prop => {
+              return !(
+                prop.action_name === 'mute_conversation' ||
+                prop.action_name === 'snooze_convresation' ||
+                prop.action_name === 'resolve_convresation'
+              );
+            }),
           },
         },
       },
@@ -246,7 +255,7 @@ export default {
     },
   },
   mounted() {
-    this.formatConditions(this.selectedResponse);
+    this.formatAutomation(this.selectedResponse);
   },
   methods: {
     onEventChange() {
@@ -414,14 +423,15 @@ export default {
     submitAutomation() {
       this.$v.$touch();
       if (this.$v.$invalid) return;
-      this.automation.conditions[
+      const automation = JSON.parse(JSON.stringify(this.automation));
-        this.automation.conditions.length - 1
+      automation.conditions[
+        automation.conditions.length - 1
       ].query_operator = null;
-      this.automation.conditions = filterQueryGenerator(
+      automation.conditions = filterQueryGenerator(
-        this.automation.conditions
+        automation.conditions
       ).payload;
-      this.automation.actions = actionQueryGenerator(this.automation.actions);
+      automation.actions = actionQueryGenerator(automation.actions);
-      this.$emit('saveAutomation', this.automation, 'EDIT');
+      this.$emit('saveAutomation', automation, 'EDIT');
     },
     resetFilter(index, currentCondition) {
       this.automation.conditions[index].filter_operator = this.automationTypes[
@@ -436,7 +446,7 @@ export default {
         return false;
       return true;
     },
-    formatConditions(automation) {
+    formatAutomation(automation) {
       const formattedConditions = automation.conditions.map(condition => {
         const inputType = this.automationTypes[
           automation.event_name
@@ -456,11 +466,20 @@ export default {
         };
       });
       const formattedActions = automation.actions.map(action => {
+        let actionParams = [];
+        if (action.action_params.length) {
+          const inputType = AUTOMATION_ACTION_TYPES.find(
+            item => item.key === action.action_name
+          ).inputType;
+          if (inputType === 'multi_select') {
+            actionParams = [
+              ...this.getActionDropdownValues(action.action_name),
+            ].filter(item => [...action.action_params].includes(item.id));
+          } else actionParams = [...action.action_params];
+        }
         return {
           ...action,
-          action_params: [
+          action_params: actionParams,
-            ...this.getActionDropdownValues(action.action_name),
-          ].filter(item => [...action.action_params].includes(item.id)),
         };
       });
       this.automation = {
@@ -469,6 +488,13 @@ export default {
         actions: formattedActions,
       };
     },
+    showActionInput(actionName) {
+      const type = AUTOMATION_ACTION_TYPES.find(
+        action => action.key === actionName
+      ).inputType;
+      if (type === null) return false;
+      return true;
+    },
   },
 };
 </script>

app/models/automation_rule.rb

@@ -27,7 +27,7 @@ class AutomationRule < ApplicationRecord
 
   scope :active, -> { where(active: true) }
 
-  CONDITIONS_ATTRS = %w[email country_code status message_type browser_language assignee_id team_id referer city company].freeze
+  CONDITIONS_ATTRS = %w[content email country_code status message_type browser_language assignee_id team_id referrer city company].freeze
   ACTIONS_ATTRS = %w[send_message add_label send_email_to_team assign_team assign_best_agents send_attachments].freeze
 
   private