feat: Edit automation modal (#3876)

* Add automation modal

* Fix the v-model for automations

* Actions and Condition dropdowns for automations

* Fix merge conflicts

* Handle event change and confirmation

* Appends new action

* Removes actions

* Automation api integration

* Api integration for creating automations

* Registers vuex module to the global store

* Automations table

* Updarted labels and actions

* Integrate automation api

* Fixes the mutation error - removed the data key wrapper

* Fixed the automation condition models to work with respective event types

* Remove temporary fixes added to the api request

* Displa timestamp and automation status values

* Added the clone buton

* Removed uncessary helper method

* Specs for automations

* Handle WIP code

* Remove the payload wrap

* Fix the action query payload

* Removed unnecessary files

* Disabled Automations routes

* Ability to delete automations

* Fix specs

* Edit automation modal

* Edit automation modal and api integration

* Replaced hardcoded values

* Using absolute paths

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

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

* Update app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

* Intendation fix

* Disable automation route

* Minor fix

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components/layout/config/sidebarItems/settings.js

@@ -69,13 +69,13 @@ const settings = accountId => ({
       ),
       toStateName: 'attributes_list',
     },
-    {
-      icon: 'automation',
-      label: 'AUTOMATION',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
-      toStateName: 'automation_list',
-    },
+    // {
+    //   icon: 'automation',
+    //   label: 'AUTOMATION',
+    //   hasSubMenu: false,
+    //   toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
+    //   toStateName: 'automation_list',
+    // },
     {
       icon: 'chat-multiple',
       label: 'CANNED_RESPONSES',

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

@@ -434,13 +434,13 @@ export default {
 }
 .event_wrapper {
   select {
-    margin: 0;
+    margin: var(--space-zero);
   }
   .info-message {
     font-size: var(--font-size-mini);
-    color: #868686;
+    color: var(--s-500);
     text-align: right;
   }
-  margin-bottom: 1.6rem;
+  margin-bottom: var(--space-medium);
 }
 </style>

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

@@ -0,0 +1,479 @@
+<template>
+  <div class="column">
+    <woot-modal-header :header-title="$t('AUTOMATION.EDIT.TITLE')" />
+    <div class="row modal-content">
+      <div class="medium-12 columns">
+        <woot-input
+          v-model="automation.name"
+          :label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
+          type="text"
+          :class="{ error: $v.automation.name.$error }"
+          :error="
+            $v.automation.name.$error
+              ? $t('AUTOMATION.ADD.FORM.NAME.ERROR')
+              : ''
+          "
+          :placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
+          @blur="$v.automation.name.$touch"
+        />
+        <woot-input
+          v-model="automation.description"
+          :label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
+          type="text"
+          :class="{ error: $v.automation.description.$error }"
+          :error="
+            $v.automation.description.$error
+              ? $t('AUTOMATION.ADD.FORM.DESC.ERROR')
+              : ''
+          "
+          :placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
+          @blur="$v.automation.description.$touch"
+        />
+        <div class="event_wrapper">
+          <label :class="{ error: $v.automation.event_name.$error }">
+            {{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
+            <select v-model="automation.event_name" @change="onEventChange()">
+              <option
+                v-for="event in automationRuleEvents"
+                :key="event.key"
+                :value="event.key"
+              >
+                {{ event.value }}
+              </option>
+            </select>
+            <span v-if="$v.automation.event_name.$error" class="message">
+              {{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
+            </span>
+          </label>
+        </div>
+        <!-- // Conditions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.CONDITIONS.LABEL') }}
+          </label>
+          <div class="medium-12 columns filters-wrap">
+            <filter-input-box
+              v-for="(condition, i) in automation.conditions"
+              :key="i"
+              v-model="automation.conditions[i]"
+              :filter-attributes="getAttributes(automation.event_name)"
+              :input-type="getInputType(automation.conditions[i].attribute_key)"
+              :operators="getOperators(automation.conditions[i].attribute_key)"
+              :dropdown-values="
+                getConditionDropdownValues(
+                  automation.conditions[i].attribute_key
+                )
+              "
+              :show-query-operator="i !== automation.conditions.length - 1"
+              :v="$v.automation.conditions.$each[i]"
+              @resetFilter="resetFilter(i, automation.conditions[i])"
+              @removeFilter="removeFilter(i)"
+            />
+            <div class="filter-actions">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewCondition"
+              >
+                {{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Conditions End -->
+        <!-- // Actions Start -->
+        <section>
+          <label>
+            {{ $t('AUTOMATION.ADD.FORM.ACTIONS.LABEL') }}
+          </label>
+          <div class="medium-12 columns filters-wrap">
+            <automation-action-input
+              v-for="(action, i) in automation.actions"
+              :key="i"
+              v-model="automation.actions[i]"
+              :action-types="automationActionTypes"
+              :dropdown-values="
+                getActionDropdownValues(automation.actions[i].action_name)
+              "
+              :v="$v.automation.actions.$each[i]"
+              @removeAction="removeAction(i)"
+            />
+            <div class="filter-actions">
+              <woot-button
+                icon="add"
+                color-scheme="success"
+                variant="smooth"
+                size="small"
+                @click="appendNewAction"
+              >
+                {{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
+              </woot-button>
+            </div>
+          </div>
+        </section>
+        <!-- // Actions End -->
+        <div class="medium-12 columns">
+          <div class="modal-footer justify-content-end w-full">
+            <woot-button
+              class="button"
+              variant="clear"
+              @click.prevent="onClose"
+            >
+              {{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
+            </woot-button>
+            <woot-button @click="submitAutomation">
+              {{ $t('AUTOMATION.ADD.SUBMIT') }}
+            </woot-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { required, requiredIf } from 'vuelidate/lib/validators';
+import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
+import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import countries from 'shared/constants/countries.js';
+import {
+  AUTOMATION_RULE_EVENTS,
+  AUTOMATION_ACTION_TYPES,
+  AUTOMATIONS,
+} from './constants';
+import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator.js';
+import actionQueryGenerator from 'dashboard/helper/actionQueryGenerator.js';
+
+export default {
+  components: {
+    filterInputBox,
+    automationActionInput,
+  },
+  mixins: [alertMixin],
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    selectedResponse: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  validations: {
+    automation: {
+      name: {
+        required,
+      },
+      description: {
+        required,
+      },
+      event_name: {
+        required,
+      },
+      conditions: {
+        required,
+        $each: {
+          values: {
+            required: requiredIf(prop => {
+              return !(
+                prop.filter_operator === 'is_present' ||
+                prop.filter_operator === 'is_not_present'
+              );
+            }),
+          },
+        },
+      },
+      actions: {
+        required,
+        $each: {
+          action_params: {
+            required,
+          },
+        },
+      },
+    },
+  },
+  data() {
+    return {
+      automationTypes: AUTOMATIONS,
+      automationRuleEvent: AUTOMATION_RULE_EVENTS[0].key,
+      automationRuleEvents: AUTOMATION_RULE_EVENTS,
+      automationActionTypes: AUTOMATION_ACTION_TYPES,
+      automationMutated: false,
+      show: true,
+      automation: {
+        name: null,
+        description: null,
+        event_name: 'conversation_created',
+        conditions: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: '',
+            query_operator: 'and',
+          },
+        ],
+        actions: [
+          {
+            action_name: 'assign_team',
+            action_params: [],
+          },
+        ],
+      },
+      showDeleteConfirmationModal: false,
+    };
+  },
+  computed: {
+    conditions() {
+      return this.automationTypes[this.automation.event_name].conditions;
+    },
+    actions() {
+      return this.automationTypes[this.automation.event_name].actions;
+    },
+    filterAttributes() {
+      return this.filterTypes.map(type => {
+        return {
+          key: type.attributeKey,
+          name: type.attributeName,
+          attributeI18nKey: type.attributeI18nKey,
+        };
+      });
+    },
+  },
+  mounted() {
+    this.formatConditions(this.selectedResponse);
+  },
+  methods: {
+    onEventChange() {
+      if (this.automation.event_name === 'message_created') {
+        this.automation.conditions = [
+          {
+            attribute_key: 'message_type',
+            filter_operator: 'equal_to',
+            values: '',
+            query_operator: 'and',
+          },
+        ];
+      } else {
+        this.automation.conditions = [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: '',
+            query_operator: 'and',
+          },
+        ];
+      }
+      this.automation.actions = [
+        {
+          action_name: 'assign_team',
+          action_params: [],
+        },
+      ];
+    },
+    getAttributes(key) {
+      return this.automationTypes[key].conditions;
+    },
+    getInputType(key) {
+      const type = this.automationTypes[
+        this.automation.event_name
+      ].conditions.find(condition => condition.key === key);
+      return type.inputType;
+    },
+    getOperators(key) {
+      const type = this.automationTypes[
+        this.automation.event_name
+      ].conditions.find(condition => condition.key === key);
+      return type.filterOperators;
+    },
+    getConditionDropdownValues(type) {
+      const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
+      switch (type) {
+        case 'status':
+          return [
+            ...Object.keys(statusFilters).map(status => {
+              return {
+                id: status,
+                name: statusFilters[status].TEXT,
+              };
+            }),
+            {
+              id: 'all',
+              name: this.$t('CHAT_LIST.FILTER_ALL'),
+            },
+          ];
+        case 'assignee_id':
+          return this.$store.getters['agents/getAgents'];
+        case 'contact':
+          return this.$store.getters['contacts/getContacts'];
+        case 'inbox_id':
+          return this.$store.getters['inboxes/getInboxes'];
+        case 'team_id':
+          return this.$store.getters['teams/getTeams'];
+        case 'campaign_id':
+          return this.$store.getters['campaigns/getAllCampaigns'].map(i => {
+            return {
+              id: i.id,
+              name: i.title,
+            };
+          });
+        case 'labels':
+          return this.$store.getters['labels/getLabels'].map(i => {
+            return {
+              id: i.id,
+              name: i.title,
+            };
+          });
+        case 'browser_language':
+          return languages;
+        case 'country_code':
+          return countries;
+        case 'message_type':
+          return [
+            {
+              id: 'incoming',
+              name: 'Incoming Message',
+            },
+            {
+              id: 'outgoing',
+              name: 'Outgoing Message',
+            },
+          ];
+        default:
+          return undefined;
+      }
+    },
+    getActionDropdownValues(type) {
+      switch (type) {
+        case 'assign_team':
+        case 'send_message':
+          return this.$store.getters['teams/getTeams'];
+        case 'add_label':
+          return this.$store.getters['labels/getLabels'].map(i => {
+            return {
+              id: i.title,
+              name: i.title,
+            };
+          });
+        default:
+          return undefined;
+      }
+    },
+    appendNewCondition() {
+      this.automation.conditions.push({
+        attribute_key: 'status',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+      });
+    },
+    appendNewAction() {
+      this.automation.actions.push({
+        action_name: 'assign_team',
+        action_params: [],
+      });
+    },
+    removeFilter(index) {
+      if (this.automation.conditions.length <= 1) {
+        this.showAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
+      } else {
+        this.automation.conditions.splice(index, 1);
+      }
+    },
+    removeAction(index) {
+      if (this.automation.actions.length <= 1) {
+        this.showAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
+      } else {
+        this.automation.actions.splice(index, 1);
+      }
+    },
+    submitAutomation() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.automation.conditions[
+        this.automation.conditions.length - 1
+      ].query_operator = null;
+      this.automation.conditions = filterQueryGenerator(
+        this.automation.conditions
+      ).payload;
+      this.automation.actions = actionQueryGenerator(this.automation.actions);
+      this.$emit('saveAutomation', this.automation, 'EDIT');
+    },
+    resetFilter(index, currentCondition) {
+      this.automation.conditions[index].filter_operator = this.automationTypes[
+        this.automation.event_name
+      ].conditions.find(
+        condition => condition.key === currentCondition.attribute_key
+      ).filterOperators[0].value;
+      this.automation.conditions[index].values = '';
+    },
+    showUserInput(operatorType) {
+      if (operatorType === 'is_present' || operatorType === 'is_not_present')
+        return false;
+      return true;
+    },
+    formatConditions(automation) {
+      const formattedConditions = automation.conditions.map(condition => {
+        const inputType = this.automationTypes[
+          automation.event_name
+        ].conditions.find(item => item.key === condition.attribute_key)
+          .inputType;
+        if (inputType === 'plain_text') {
+          return {
+            ...condition,
+            values: condition.values[0],
+          };
+        }
+        return {
+          ...condition,
+          values: [
+            ...this.getConditionDropdownValues(condition.attribute_key),
+          ].filter(item => [...condition.values].includes(item.id)),
+        };
+      });
+      const formattedActions = automation.actions.map(action => {
+        return {
+          ...action,
+          action_params: [
+            ...this.getActionDropdownValues(action.action_name),
+          ].filter(item => [...action.action_params].includes(item.id)),
+        };
+      });
+      this.automation = {
+        ...automation,
+        conditions: formattedConditions,
+        actions: formattedActions,
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.filters-wrap {
+  padding: var(--space-normal);
+  border-radius: var(--border-radius-large);
+  border: 1px solid var(--color-border);
+  background: var(--color-background-light);
+  margin-bottom: var(--space-normal);
+}
+
+.filter-actions {
+  margin-top: var(--space-normal);
+}
+.event_wrapper {
+  select {
+    margin: var(--space-zero);
+  }
+  .info-message {
+    font-size: var(--font-size-mini);
+    color: var(--s-500);
+    text-align: right;
+  }
+  margin-bottom: var(--space-medium);
+}
+</style>

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

@@ -43,7 +43,7 @@
               </td>
               <td>{{ readableTime(automation.created_on) }}</td>
               <td class="button-wrapper">
-                <!-- <woot-button
+                <woot-button
                   v-tooltip.top="$t('AUTOMATION.FORM.EDIT')"
                   variant="smooth"
                   size="tiny"
@@ -54,7 +54,7 @@
                   @click="openEditPopup(automation)"
                 >
                 </woot-button>
-                <woot-button
+                <!-- <woot-button
                   v-tooltip.top="'Clone'"
                   variant="smooth"
                   size="tiny"
@@ -94,7 +94,7 @@
       <add-automation-rule
         v-if="showAddPopup"
         :on-close="hideAddPopup"
-        @saveAutomation="onCreateAutomation"
+        @saveAutomation="submitAutomation"
       />
     </woot-modal>
 
@@ -107,17 +107,32 @@
       :confirm-text="deleteConfirmText"
       :reject-text="deleteRejectText"
     />
+
+    <woot-modal
+      :show.sync="showEditPopup"
+      size="medium"
+      :on-close="hideEditPopup"
+    >
+      <edit-automation-rule
+        v-if="showEditPopup"
+        :on-close="hideEditPopup"
+        :selected-response="selectedResponse"
+        @saveAutomation="submitAutomation"
+      />
+    </woot-modal>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
 import AddAutomationRule from './AddAutomationRule.vue';
+import EditAutomationRule from './EditAutomationRule.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 import timeMixin from 'dashboard/mixins/time';
 
 export default {
   components: {
     AddAutomationRule,
+    EditAutomationRule,
   },
   mixins: [alertMixin, timeMixin],
   data() {
@@ -162,8 +177,8 @@ export default {
       this.showAddPopup = false;
     },
     openEditPopup(response) {
-      this.showEditPopup = true;
       this.selectedResponse = response;
+      this.showEditPopup = true;
     },
     hideEditPopup() {
       this.showEditPopup = false;
@@ -189,13 +204,25 @@ export default {
         this.showAlert(this.$t('AUTOMATION.DELETE.API.ERROR_MESSAGE'));
       }
     },
-    async onCreateAutomation(payload) {
+    async submitAutomation(payload, mode) {
       try {
-        await await this.$store.dispatch('automations/create', payload);
-        this.showAlert(this.$t('AUTOMATION.ADD.API.SUCCESS_MESSAGE'));
+        const action =
+          mode === 'EDIT' ? 'automations/update' : 'automations/create';
+        const successMessage =
+          mode === 'edit'
+            ? this.$t('AUTOMATION.EDIT.API.SUCCESS_MESSAGE')
+            : this.$t('AUTOMATION.ADD.API.SUCCESS_MESSAGE');
+
+        await await this.$store.dispatch(action, payload);
+        this.showAlert(this.$t(successMessage));
         this.hideAddPopup();
+        this.hideEditPopup();
       } catch (error) {
-        this.showAlert(this.$t('AUTOMATION.ADD.API.ERROR_MESSAGE'));
+        const errorMessage =
+          mode === 'edit'
+            ? this.$t('AUTOMATION.EDIT.API.ERROR_MESSAGE')
+            : this.$t('AUTOMATION.ADD.API.ERROR_MESSAGE');
+        this.showAlert(errorMessage);
       }
     },
     readableTime(date) {

app/javascript/dashboard/store/modules/automations.js

@@ -8,6 +8,7 @@ export const state = {
     isFetching: false,
     isCreating: false,
     isDeleting: false,
+    isUpdating: false,
   },
 };
 
@@ -76,7 +77,7 @@ export const mutations = {
   },
   [types.ADD_AUTOMATION]: MutationHelpers.create,
   [types.SET_AUTOMATIONS]: MutationHelpers.set,
-  // [types.EDIT_AUTOMATION]: MutationHelpers.update,
+  [types.EDIT_AUTOMATION]: MutationHelpers.update,
   [types.DELETE_AUTOMATION]: MutationHelpers.destroy,
 };