Chatwoot/app/javascript/shared/mixins/automationMixin.js

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.getAutomationType(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.getAutomationType(key);
      return type.filterOperators;
    },
    getAutomationType(key) {
      return this.automationTypes[this.automation.event_name].conditions.find(
        condition => condition.key === key
      );
    },
    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 = [];
    },
    manifestConditions(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 conditions = 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)),
        };
      });
      return conditions;
    },
    manifestActions(automation) {
      const actions = 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,
        };
      });
      return actions;
    },
    formatAutomation(automation) {
      this.automation = {
        ...automation,
        conditions: this.manifestConditions(automation),
        actions: this.manifestActions(automation),
      };
    },
    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
      );
    },
  },
};