From 9bfbd9e904363d8f4541f67db26006ca28e02958 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <fayazara@gmail.com>
Date: Mon, 9 May 2022 22:12:04 +0530
Subject: [PATCH] Ported duplicate logic to a mixin

---
 .../settings/automation/AddAutomationRule.vue | 322 +------------
 .../automation/EditAutomationRule.vue         | 419 +---------------
 .../shared/mixins/automationMixin.js          | 446 ++++++++++++++++++
 .../mixins/specs/automationMixin.spec.js      |  70 +++
 4 files changed, 529 insertions(+), 728 deletions(-)
 create mode 100644 app/javascript/shared/mixins/automationMixin.js
 create mode 100644 app/javascript/shared/mixins/specs/automationMixin.spec.js

diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
index 655437c14..e7c3a8891 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
@@ -138,72 +138,28 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import automationMixin from 'shared/mixins/automationMixin';
 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 '/app/javascript/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';
-import * as OPERATORS from './operators';
 export default {
   components: {
     filterInputBox,
     automationActionInput,
   },
-  mixins: [alertMixin],
+  mixins: [alertMixin, automationMixin],
   props: {
     onClose: {
       type: Function,
       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: requiredIf(prop => {
-              if (prop.action_name === 'send_email_to_team') return true;
-              return !(
-                prop.action_name === 'mute_conversation' ||
-                prop.action_name === 'snooze_conversation' ||
-                prop.action_name === 'resolve_conversation'
-              );
-            }),
-          },
-        },
-      },
-    },
-  },
+
   data() {
     return {
       automationTypes: AUTOMATIONS,
@@ -233,6 +189,7 @@ export default {
       },
       showDeleteConfirmationModal: false,
       allCustomAttributes: [],
+      mode: 'create',
     };
   },
   computed: {
@@ -261,274 +218,7 @@ export default {
     },
   },
   mounted() {
-    const customAttributesRaw = this.$store.getters['attributes/getAttributes'];
-    const customAttributeTypes = customAttributesRaw.map(attr => {
-      return {
-        key: attr.attribute_key,
-        name: attr.attribute_display_name,
-        inputType: this.customAttributeInputType(attr.attribute_display_type),
-        filterOperators: this.getOperatorTypes(attr.attribute_display_type),
-      };
-    });
-    AUTOMATIONS.message_created.conditions.push(...customAttributeTypes);
-    AUTOMATIONS.conversation_created.conditions.push(...customAttributeTypes);
-    AUTOMATIONS.conversation_updated.conditions.push(...customAttributeTypes);
-  },
-  methods: {
-    customAttributeInputType(key) {
-      switch (key) {
-        case 'date':
-          return 'date';
-        case 'text':
-          return 'plain_text';
-        case 'list':
-          return 'search_select';
-        case 'checkbox':
-          return 'search_select';
-        default:
-          return 'plain_text';
-      }
-    },
-    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;
-    },
-    getOperatorTypes(key) {
-      switch (key) {
-        case 'list':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'text':
-          return OPERATORS.OPERATOR_TYPES_3;
-        case 'number':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'link':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'date':
-          return OPERATORS.OPERATOR_TYPES_4;
-        case 'checkbox':
-          return OPERATORS.OPERATOR_TYPES_1;
-        default:
-          return OPERATORS.OPERATOR_TYPES_1;
-      }
-    },
-    getConditionDropdownValues(type) {
-      const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributes'
-      ];
-
-      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type &&
-          attr.attribute_display_type === 'checkbox'
-        );
-      });
-      if (isCustomAttributeCheckbox) {
-        return [
-          {
-            id: true,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-          },
-          {
-            id: false,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-          },
-        ];
-      }
-
-      const isCustomAttributeList = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type && attr.attribute_display_type === 'list'
-        );
-      });
-
-      if (isCustomAttributeList) {
-        return allCustomAttributes
-          .find(attr => attr.attribute_key === type)
-          .attribute_values.map(item => {
-            return {
-              id: item,
-              name: item,
-            };
-          });
-      }
-
-      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.title,
-              name: i.title,
-            };
-          });
-        case 'browser_language':
-          return languages;
-        case 'country_code':
-          return countries;
-        default:
-          return undefined;
-      }
-    },
-    getActionDropdownValues(type) {
-      switch (type) {
-        case 'assign_team':
-        case 'send_email_to_team':
-          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() {
-      switch (this.automation.event_name) {
-        case 'message_created':
-          this.automation.conditions.push({
-            attribute_key: 'message_type',
-            filter_operator: 'equal_to',
-            values: '',
-            query_operator: 'and',
-          });
-          break;
-        default:
-          this.automation.conditions.push({
-            attribute_key: 'status',
-            filter_operator: 'equal_to',
-            values: '',
-            query_operator: 'and',
-          });
-          break;
-      }
-    },
-    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;
-      const automation = JSON.parse(JSON.stringify(this.automation));
-      automation.conditions[
-        automation.conditions.length - 1
-      ].query_operator = null;
-      automation.conditions = filterQueryGenerator(
-        automation.conditions
-      ).payload;
-      automation.actions = actionQueryGenerator(automation.actions);
-      this.$emit('saveAutomation', automation);
-    },
-    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 = '';
-    },
-    resetAction(index) {
-      this.automation.actions[index].action_params = [];
-    },
-    showUserInput(operatorType) {
-      if (operatorType === 'is_present' || operatorType === 'is_not_present')
-        return false;
-      return true;
-    },
-    showActionInput(actionName) {
-      if (actionName === 'send_email_to_team' || actionName === 'send_message')
-        return false;
-      const type = AUTOMATION_ACTION_TYPES.find(
-        action => action.key === actionName
-      ).inputType;
-      if (type === null) return false;
-      return true;
-    },
+    this.manifestCustomAttributes();
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
index 8704fbb92..9ffbff631 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
@@ -144,25 +144,22 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import automationMixin from 'shared/mixins/automationMixin';
 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';
-import * as OPERATORS from './operators';
+
 export default {
   components: {
     filterInputBox,
     automationActionInput,
   },
-  mixins: [alertMixin],
+  mixins: [alertMixin, automationMixin],
   props: {
     onClose: {
       type: Function,
@@ -173,46 +170,7 @@ export default {
       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: requiredIf(prop => {
-              return !(
-                prop.action_name === 'mute_conversation' ||
-                prop.action_name === 'snooze_conversation' ||
-                prop.action_name === 'resolve_conversation'
-              );
-            }),
-          },
-        },
-      },
-    },
-  },
+
   data() {
     return {
       automationTypes: AUTOMATIONS,
@@ -242,6 +200,7 @@ export default {
       },
       showDeleteConfirmationModal: false,
       allCustomAttributes: [],
+      mode: 'edit',
     };
   },
   computed: {
@@ -262,374 +221,10 @@ export default {
     },
   },
   mounted() {
-    const customAttributesRaw = this.$store.getters['attributes/getAttributes'];
-    const customAttributeTypes = customAttributesRaw.map(attr => {
-      return {
-        key: attr.attribute_key,
-        name: attr.attribute_display_name,
-        inputType: this.customAttributeInputType(attr.attribute_display_type),
-        filterOperators: this.getOperatorTypes(attr.attribute_display_type),
-      };
-    });
-    AUTOMATIONS.message_created.conditions.push(...customAttributeTypes);
-    AUTOMATIONS.conversation_created.conditions.push(...customAttributeTypes);
-    AUTOMATIONS.conversation_updated.conditions.push(...customAttributeTypes);
+    this.manifestCustomAttributes();
     this.allCustomAttributes = this.$store.getters['attributes/getAttributes'];
     this.formatAutomation(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;
-    },
-    isACustomAttribute(key) {
-      return this.allCustomAttributes.find(attr => {
-        return attr.attribute_key === key;
-      });
-    },
-    getInputType(key) {
-      const customAttribute = this.isACustomAttribute(key);
-      if (customAttribute) {
-        return this.customAttributeInputType(
-          customAttribute.attribute_display_type
-        );
-      }
-      const type = this.automationTypes[
-        this.automation.event_name
-      ].conditions.find(condition => condition.key === key);
-      return type.inputType;
-    },
-    getOperators(key) {
-      const customAttribute = this.isACustomAttribute(key);
-      if (customAttribute) {
-        return this.getOperatorTypes(customAttribute.attribute_display_type);
-      }
-      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');
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributes'
-      ];
-
-      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type &&
-          attr.attribute_display_type === 'checkbox'
-        );
-      });
-      if (isCustomAttributeCheckbox) {
-        return [
-          {
-            id: true,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
-          },
-          {
-            id: false,
-            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
-          },
-        ];
-      }
-
-      const isCustomAttributeList = allCustomAttributes.find(attr => {
-        return (
-          attr.attribute_key === type && attr.attribute_display_type === 'list'
-        );
-      });
-
-      if (isCustomAttributeList) {
-        return allCustomAttributes
-          .find(attr => attr.attribute_key === type)
-          .attribute_values.map(item => {
-            return {
-              id: item,
-              name: item,
-            };
-          });
-      }
-
-      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.title,
-              name: i.title,
-            };
-          });
-        case 'browser_language':
-          return languages;
-        case 'country_code':
-          return countries;
-        default:
-          return undefined;
-      }
-    },
-    getActionDropdownValues(type) {
-      switch (type) {
-        case 'assign_team':
-        case 'send_email_to_team':
-          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() {
-      if (
-        !this.automation.conditions[this.automation.conditions.length - 1]
-          .query_operator
-      ) {
-        this.automation.conditions[
-          this.automation.conditions.length - 1
-        ].query_operator = 'and';
-      }
-      switch (this.automation.event_name) {
-        case 'message_created':
-          this.automation.conditions.push({
-            attribute_key: 'message_type',
-            filter_operator: 'equal_to',
-            values: '',
-            query_operator: 'and',
-          });
-          break;
-        default:
-          this.automation.conditions.push({
-            attribute_key: 'status',
-            filter_operator: 'equal_to',
-            values: '',
-            query_operator: 'and',
-          });
-          break;
-      }
-    },
-    appendNewAction() {
-      this.automation.actions.push({
-        action_name: 'assign_team',
-        action_params: [],
-      });
-    },
-    removeFilter(index) {
-      if (this.automation.conditions.length <= 1) {
-        this.showAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
-      } else {
-        this.automation.conditions.splice(index, 1);
-      }
-    },
-    removeAction(index) {
-      if (this.automation.actions.length <= 1) {
-        this.showAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
-      } else {
-        this.automation.actions.splice(index, 1);
-      }
-    },
-    submitAutomation() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      const automation = JSON.parse(JSON.stringify(this.automation));
-      automation.conditions[
-        automation.conditions.length - 1
-      ].query_operator = null;
-      automation.conditions = filterQueryGenerator(
-        automation.conditions
-      ).payload;
-      automation.actions = actionQueryGenerator(automation.actions);
-      this.$emit('saveAutomation', 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;
-    },
-    formatAutomation(automation) {
-      const allCustomAttributes = this.$store.getters[
-        'attributes/getAttributes'
-      ];
-      const customAttributes = allCustomAttributes.map(attr => {
-        return {
-          key: attr.attribute_key,
-          name: attr.attribute_display_name,
-          type: attr.attribute_display_type,
-        };
-      });
-      const formattedConditions = automation.conditions.map(condition => {
-        const isCustomAttribute = customAttributes.find(
-          attr => attr.key === condition.attribute_key
-        );
-        let inputType = 'plain_text';
-        if (isCustomAttribute) {
-          inputType = this.customAttributeInputType(isCustomAttribute.type);
-        } else {
-          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 => {
-        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 if (inputType === 'team_message') {
-            actionParams = {
-              team_ids: [
-                ...this.getActionDropdownValues(action.action_name),
-              ].filter(item =>
-                [...action.action_params[0].team_ids].includes(item.id)
-              ),
-              message: action.action_params[0].message,
-            };
-          } else actionParams = [...action.action_params];
-        }
-        return {
-          ...action,
-          action_params: actionParams,
-        };
-      });
-      this.automation = {
-        ...automation,
-        conditions: formattedConditions,
-        actions: formattedActions,
-      };
-    },
-    showActionInput(actionName) {
-      if (actionName === 'send_email_to_team' || actionName === 'send_message')
-        return false;
-      const type = AUTOMATION_ACTION_TYPES.find(
-        action => action.key === actionName
-      ).inputType;
-      if (type === null) return false;
-      return true;
-    },
-    getOperatorTypes(key) {
-      switch (key) {
-        case 'list':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'text':
-          return OPERATORS.OPERATOR_TYPES_3;
-        case 'number':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'link':
-          return OPERATORS.OPERATOR_TYPES_1;
-        case 'date':
-          return OPERATORS.OPERATOR_TYPES_4;
-        case 'checkbox':
-          return OPERATORS.OPERATOR_TYPES_1;
-        default:
-          return OPERATORS.OPERATOR_TYPES_1;
-      }
-    },
-    customAttributeInputType(key) {
-      switch (key) {
-        case 'date':
-          return 'date';
-        case 'text':
-          return 'plain_text';
-        case 'list':
-          return 'search_select';
-        case 'checkbox':
-          return 'search_select';
-        default:
-          return 'plain_text';
-      }
-    },
-    getFileName(id, actionType) {
-      if (!id) return '';
-      if (actionType === 'send_attachment') {
-        const file = this.automation.files.find(item => item.blob_id === id);
-        if (file) return file.filename.toString();
-      }
-      return '';
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/app/javascript/shared/mixins/automationMixin.js b/app/javascript/shared/mixins/automationMixin.js
new file mode 100644
index 000000000..c8b2c1df9
--- /dev/null
+++ b/app/javascript/shared/mixins/automationMixin.js
@@ -0,0 +1,446 @@
+import * as OPERATORS from '../../dashboard/routes/dashboard/settings/automation/operators';
+import languages from '../../dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import countries from '../../shared/constants/countries';
+import filterQueryGenerator from '../../dashboard/helper/filterQueryGenerator.js';
+import actionQueryGenerator from '../../dashboard/helper/actionQueryGenerator.js';
+import { required, requiredIf } from 'vuelidate/lib/validators';
+
+export 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: requiredIf(prop => {
+              return !(
+                prop.action_name === 'mute_conversation' ||
+                prop.action_name === 'snooze_conversation' ||
+                prop.action_name === 'resolve_conversation'
+              );
+            }),
+          },
+        },
+      },
+    },
+  },
+  methods: {
+    customAttributeInputType(key) {
+      switch (key) {
+        case 'date':
+          return 'date';
+        case 'text':
+          return 'plain_text';
+        case 'list':
+          return 'search_select';
+        case 'checkbox':
+          return 'search_select';
+        default:
+          return 'plain_text';
+      }
+    },
+    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;
+    },
+    isACustomAttribute(key) {
+      return this.allCustomAttributes.find(attr => {
+        return attr.attribute_key === key;
+      });
+    },
+    getInputType(key) {
+      const customAttribute = this.isACustomAttribute(key);
+      if (customAttribute) {
+        return this.customAttributeInputType(
+          customAttribute.attribute_display_type
+        );
+      }
+      const type = this.automationTypes[
+        this.automation.event_name
+      ].conditions.find(condition => condition.key === key);
+      return type.inputType;
+    },
+    getOperators(key) {
+      if (this.mode === 'edit') {
+        const customAttribute = this.isACustomAttribute(key);
+        if (customAttribute) {
+          return this.getOperatorTypes(customAttribute.attribute_display_type);
+        }
+      }
+      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');
+      const allCustomAttributes = this.$store.getters[
+        'attributes/getAttributes'
+      ];
+
+      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
+        return (
+          attr.attribute_key === type &&
+          attr.attribute_display_type === 'checkbox'
+        );
+      });
+      if (isCustomAttributeCheckbox) {
+        return [
+          {
+            id: true,
+            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
+          },
+          {
+            id: false,
+            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
+          },
+        ];
+      }
+
+      const isCustomAttributeList = allCustomAttributes.find(attr => {
+        return (
+          attr.attribute_key === type && attr.attribute_display_type === 'list'
+        );
+      });
+
+      if (isCustomAttributeList) {
+        return allCustomAttributes
+          .find(attr => attr.attribute_key === type)
+          .attribute_values.map(item => {
+            return {
+              id: item,
+              name: item,
+            };
+          });
+      }
+
+      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;
+      }
+    },
+    appendNewCondition() {
+      if (this.mode === 'edit') {
+        if (
+          !this.automation.conditions[this.automation.conditions.length - 1]
+            .query_operator
+        ) {
+          this.automation.conditions[
+            this.automation.conditions.length - 1
+          ].query_operator = 'and';
+        }
+      }
+      switch (this.automation.event_name) {
+        case 'message_created':
+          this.automation.conditions.push({
+            attribute_key: 'message_type',
+            filter_operator: 'equal_to',
+            values: '',
+            query_operator: 'and',
+          });
+          break;
+        default:
+          this.automation.conditions.push({
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: '',
+            query_operator: 'and',
+          });
+          break;
+      }
+    },
+    appendNewAction() {
+      this.automation.actions.push({
+        action_name: 'assign_team',
+        action_params: [],
+      });
+    },
+    removeFilter(index) {
+      if (this.automation.conditions.length <= 1) {
+        this.showAlert(this.$t('AUTOMATION.CONDITION.DELETE_MESSAGE'));
+      } else {
+        this.automation.conditions.splice(index, 1);
+      }
+    },
+    removeAction(index) {
+      if (this.automation.actions.length <= 1) {
+        this.showAlert(this.$t('AUTOMATION.ACTION.DELETE_MESSAGE'));
+      } else {
+        this.automation.actions.splice(index, 1);
+      }
+    },
+    submitAutomation() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      const automation = JSON.parse(JSON.stringify(this.automation));
+      automation.conditions[
+        automation.conditions.length - 1
+      ].query_operator = null;
+      automation.conditions = filterQueryGenerator(
+        automation.conditions
+      ).payload;
+      automation.actions = actionQueryGenerator(automation.actions);
+      this.$emit(
+        'saveAutomation',
+        automation,
+        this.mode === 'edit' ? 'EDIT' : null
+      );
+    },
+    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;
+    },
+    showActionInput(actionName) {
+      if (actionName === 'send_email_to_team' || actionName === 'send_message')
+        return false;
+      const type = this.automationActionTypes.find(
+        action => action.key === actionName
+      ).inputType;
+      if (type === null) return false;
+      return true;
+    },
+    resetAction(index) {
+      this.automation.actions[index].action_params = [];
+    },
+    formatAutomation(automation) {
+      const allCustomAttributes = this.$store.getters[
+        'attributes/getAttributes'
+      ];
+      const customAttributes = allCustomAttributes.map(attr => {
+        return {
+          key: attr.attribute_key,
+          name: attr.attribute_display_name,
+          type: attr.attribute_display_type,
+        };
+      });
+      const formattedConditions = automation.conditions.map(condition => {
+        const isCustomAttribute = customAttributes.find(
+          attr => attr.key === condition.attribute_key
+        );
+        let inputType = 'plain_text';
+        if (isCustomAttribute) {
+          inputType = this.customAttributeInputType(isCustomAttribute.type);
+        } else {
+          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 => {
+        let actionParams = [];
+        if (action.action_params.length) {
+          const inputType = this.automationActionTypes.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 if (inputType === 'team_message') {
+            actionParams = {
+              team_ids: [
+                ...this.getActionDropdownValues(action.action_name),
+              ].filter(item =>
+                [...action.action_params[0].team_ids].includes(item.id)
+              ),
+              message: action.action_params[0].message,
+            };
+          } else actionParams = [...action.action_params];
+        }
+        return {
+          ...action,
+          action_params: actionParams,
+        };
+      });
+      this.automation = {
+        ...automation,
+        conditions: formattedConditions,
+        actions: formattedActions,
+      };
+    },
+    getOperatorTypes(key) {
+      switch (key) {
+        case 'list':
+          return OPERATORS.OPERATOR_TYPES_1;
+        case 'text':
+          return OPERATORS.OPERATOR_TYPES_3;
+        case 'number':
+          return OPERATORS.OPERATOR_TYPES_1;
+        case 'link':
+          return OPERATORS.OPERATOR_TYPES_1;
+        case 'date':
+          return OPERATORS.OPERATOR_TYPES_4;
+        case 'checkbox':
+          return OPERATORS.OPERATOR_TYPES_1;
+        default:
+          return OPERATORS.OPERATOR_TYPES_1;
+      }
+    },
+    getFileName(id, actionType) {
+      if (!id) return '';
+      if (actionType === 'send_attachment') {
+        const file = this.automation.files.find(item => item.blob_id === id);
+        if (file) return file.filename.toString();
+      }
+      return '';
+    },
+    getActionDropdownValues(type) {
+      switch (type) {
+        case 'assign_team':
+        case 'send_email_to_team':
+          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;
+      }
+    },
+    manifestCustomAttributes() {
+      const customAttributesRaw = this.$store.getters[
+        'attributes/getAttributes'
+      ];
+      const customAttributeTypes = customAttributesRaw.map(attr => {
+        return {
+          key: attr.attribute_key,
+          name: attr.attribute_display_name,
+          inputType: this.customAttributeInputType(attr.attribute_display_type),
+          filterOperators: this.getOperatorTypes(attr.attribute_display_type),
+        };
+      });
+      this.automationTypes.message_created.conditions.push(
+        ...customAttributeTypes
+      );
+      this.automationTypes.conversation_created.conditions.push(
+        ...customAttributeTypes
+      );
+      this.automationTypes.conversation_updated.conditions.push(
+        ...customAttributeTypes
+      );
+    },
+  },
+};
diff --git a/app/javascript/shared/mixins/specs/automationMixin.spec.js b/app/javascript/shared/mixins/specs/automationMixin.spec.js
new file mode 100644
index 000000000..95b8e8904
--- /dev/null
+++ b/app/javascript/shared/mixins/specs/automationMixin.spec.js
@@ -0,0 +1,70 @@
+import automationMixin from '../automationMixin';
+import { shallowMount } from '@vue/test-utils';
+import MockComponent from './MockComponent.vue';
+
+describe('Automation Mixin function', () => {
+  const wrapper = shallowMount(MockComponent, {
+    mixins: [automationMixin],
+  });
+
+  it('customAttributeInputType should be defined', () => {
+    expect(wrapper.vm.customAttributeInputType).toBeTruthy();
+  });
+  it('onEventChange should be defined', () => {
+    expect(wrapper.vm.onEventChange).toBeTruthy();
+  });
+  it('getAttributes should be defined', () => {
+    expect(wrapper.vm.getAttributes).toBeTruthy();
+  });
+  it('isACustomAttribute should be defined', () => {
+    expect(wrapper.vm.isACustomAttribute).toBeTruthy();
+  });
+  it('getOperators should be defined', () => {
+    expect(wrapper.vm.getOperators).toBeTruthy();
+  });
+  it('getConditionDropdownValues should be defined', () => {
+    expect(wrapper.vm.getConditionDropdownValues).toBeTruthy();
+  });
+  it('appendNewCondition should be defined', () => {
+    expect(wrapper.vm.appendNewCondition).toBeTruthy();
+  });
+  it('appendNewAction should be defined', () => {
+    expect(wrapper.vm.appendNewAction).toBeTruthy();
+  });
+  it('removeFilter should be defined', () => {
+    expect(wrapper.vm.removeFilter).toBeTruthy();
+  });
+  it('removeAction should be defined', () => {
+    expect(wrapper.vm.removeAction).toBeTruthy();
+  });
+  it('submitAutomation should be defined', () => {
+    expect(wrapper.vm.submitAutomation).toBeTruthy();
+  });
+  it('resetFilter should be defined', () => {
+    expect(wrapper.vm.resetFilter).toBeTruthy();
+  });
+  it('showUserInput should be defined', () => {
+    expect(wrapper.vm.showUserInput).toBeTruthy();
+  });
+  it('showActionInput should be defined', () => {
+    expect(wrapper.vm.showActionInput).toBeTruthy();
+  });
+  it('resetAction should be defined', () => {
+    expect(wrapper.vm.resetAction).toBeTruthy();
+  });
+  it('formatAutomation should be defined', () => {
+    expect(wrapper.vm.formatAutomation).toBeTruthy();
+  });
+  it('getOperatorTypes should be defined', () => {
+    expect(wrapper.vm.getOperatorTypes).toBeTruthy();
+  });
+  it('getFileName should be defined', () => {
+    expect(wrapper.vm.getFileName).toBeTruthy();
+  });
+  it('getActionDropdownValues should be defined', () => {
+    expect(wrapper.vm.getActionDropdownValues).toBeTruthy();
+  });
+  it('manifestCustomAttributes should be defined', () => {
+    expect(wrapper.vm.manifestCustomAttributes).toBeTruthy();
+  });
+});