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

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

@@ -271,6 +271,11 @@ export default {
       accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
+    currentContact() {
+      return this.$store.getters['contacts/getContact'](
+        this.currentChat.meta.sender.id
+      );
+    },
     shouldShowReplyToMessage() {
       return (
         this.inReplyTo?.id &&
@@ -509,6 +514,7 @@ export default {
     messageVariables() {
       const variables = getMessageVariables({
         conversation: this.currentChat,
+        contact: this.currentContact,
       });
       return variables;
     },

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 = {}) {

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -1,20 +1,41 @@
 <template>
-  <div v-if="items.length" ref="mentionsListContainer" class="mention--box">
+  <div
+    v-if="items.length"
+    ref="mentionsListContainer"
+    class="bg-white dark:bg-slate-800 rounded-md overflow-auto absolute w-full z-20 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border border-solid border-slate-100 dark:border-slate-700 mention--box"
+  >
     <ul class="vertical dropdown menu">
       <woot-dropdown-item
         v-for="(item, index) in items"
         :id="`mention-item-${index}`"
         :key="item.key"
+        class="!mb-0"
         @mouseover="onHover(index)"
       >
-        <woot-button
-          class="canned-item__button"
-          :variant="index === selectedIndex ? '' : 'clear'"
-          :class="{ active: index === selectedIndex }"
+        <button
+          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-b border-solid border-slate-100 dark:border-slate-700"
+          :class="{
+            ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
+          }"
           @click="onListItemSelection(index)"
         >
-          <strong>{{ item.label }}</strong> - {{ item.description }}
-        </woot-button>
+          <p
+            class="text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 font-medium mb-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
+            :class="{
+              'text-woot-500 dark:text-woot-500': index === selectedIndex,
+            }"
+          >
+            {{ item.description }}
+          </p>
+          <p
+            class="text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 mb-0 text-xs overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
+            :class="{
+              'text-woot-500 dark:text-woot-500': index === selectedIndex,
+            }"
+          >
+            {{ variableKey(item) }}
+          </p>
+        </button>
       </woot-dropdown-item>
     </ul>
   </div>
@@ -29,6 +50,10 @@ export default {
       type: Array,
       default: () => {},
     },
+    type: {
+      type: String,
+      default: 'canned',
+    },
   },
   data() {
     return {
@@ -73,28 +98,17 @@ export default {
     onSelect() {
       this.$emit('mention-select', this.items[this.selectedIndex]);
     },
+    variableKey(item = {}) {
+      return this.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
 .mention--box {
-  @apply bg-white dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border-t border-solid border-slate-75 dark:border-slate-800;
-
-  .dropdown-menu__item:last-child {
-    @apply pb-1;
-  }
-
-  .active {
-    @apply text-white dark:text-white;
-
-    &:hover {
-      @apply bg-woot-700 dark:bg-woot-700;
-    }
-  }
-
-  .button {
-    @apply transition-none h-8 leading-[1.4];
+  .dropdown-menu__item:last-child > button {
+    @apply border-0;
   }
 }