feat: Enable custom attributes in the suggestion for variables. (#8520)

app/javascript/dashboard/components/widgets/conversation/VariableList.vue

@@ -1,5 +1,9 @@
 <template>
-  <mention-box :items="items" @mention-select="handleVariableClick">
+  <mention-box
+    type="variable"
+    :items="items"
+    @mention-select="handleVariableClick"
+  >
     <template slot-scope="{ item }">
       <span class="text-capitalize variable--list-label">
         {{ item.description }}
@@ -10,6 +14,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import { MESSAGE_VARIABLES } from 'shared/constants/messages';
 import MentionBox from '../mentions/MentionBox.vue';
 
@@ -22,7 +27,16 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      customAttributes: 'attributes/getAttributes',
+    }),
     items() {
+      return [
+        ...this.standardAttributeVariables,
+        ...this.customAttributeVariables,
+      ];
+    },
+    standardAttributeVariables() {
       return MESSAGE_VARIABLES.filter(variable => {
         return (
           variable.label.includes(this.searchKey) ||
@@ -34,6 +48,20 @@ export default {
         description: variable.label,
       }));
     },
+    customAttributeVariables() {
+      return this.customAttributes.map(attribute => {
+        const attributePrefix =
+          attribute.attribute_model === 'conversation_attribute'
+            ? 'conversation'
+            : 'contact';
+
+        return {
+          label: `${attributePrefix}.custom_attribute.${attribute.attribute_key}`,
+          key: `${attributePrefix}.custom_attribute.${attribute.attribute_key}`,
+          description: attribute.attribute_description,
+        };
+      });
+    },
   },
   methods: {
     handleVariableClick(item = {}) {