feat: add conversation required attributes

app/javascript/dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { ref } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+});
+
+const emit = defineEmits(['click']);
+
+const showDropdown = ref(false);
+
+const handleClick = () => {
+  emit('click');
+};
+
+const attributeOptions = [
+  {
+    action: 'add',
+    value: 'installation_type',
+    label: 'Installation Type',
+  },
+  {
+    action: 'add',
+    value: 'follow_up',
+    label: 'Follow up with the customer',
+  },
+  {
+    action: 'add',
+    value: 'review_status',
+    label: 'Review Status',
+  },
+  {
+    action: 'add',
+    value: 'priority',
+    label: 'Priority',
+  },
+  {
+    action: 'add',
+    value: 'department',
+    label: 'Department',
+  },
+  {
+    action: 'add',
+    value: 'customer_type',
+    label: 'Customer Type',
+  },
+];
+
+const handleAddAttributesClick = event => {
+  event.stopPropagation();
+  showDropdown.value = !showDropdown.value;
+};
+
+const handleAttributeAction = () => {
+  showDropdown.value = false;
+};
+
+const closeDropdown = () => {
+  showDropdown.value = false;
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5" @click="handleClick">
+    <div class="flex flex-col gap-2 items-start">
+      <div class="flex justify-between items-center w-full">
+        <h3 class="text-base font-medium text-n-slate-12">{{ title }}</h3>
+        <div v-on-clickaway="closeDropdown" class="relative">
+          <Button
+            icon="i-lucide-circle-plus"
+            :label="$t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.ADD.TITLE')"
+            @click="handleAddAttributesClick"
+          />
+          <DropdownMenu
+            v-if="showDropdown"
+            :menu-items="attributeOptions"
+            show-search
+            :search-placeholder="
+              $t(
+                'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.ADD.SEARCH_PLACEHOLDER'
+              )
+            "
+            class="top-full mt-1 ltr:right-0 rtl:left-0"
+            @action="handleAttributeAction"
+          />
+        </div>
+      </div>
+      <p class="mb-0 text-sm text-n-slate-11">{{ description }}</p>
+    </div>
+  </CardLayout>
+</template>

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -488,6 +488,14 @@
         "TITLE": "Conversation Workflows",
         "DESCRIPTION": "Configure rules and required fields for conversation resolution."
       }
+    },
+    "REQUIRED_ATTRIBUTES": {
+      "TITLE": "Attributes required on resolution",
+      "DESCRIPTION": "When resolving a conversation, agents will be prompted to fill these attributes if they haven't yet.",
+      "ADD": {
+        "TITLE": "Add Attributes",
+        "SEARCH_PLACEHOLDER": "Search attributes"
+      }
     }
   },
   "CREATE_ACCOUNT": {

app/javascript/dashboard/routes/dashboard/settings/conversationWorkflow/index.vue

@@ -1,12 +1,7 @@
 <script setup>
-// import { computed } from 'vue';
-// import { useI18n } from 'vue-i18n';
-// import { useRouter } from 'vue-router';
 import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
 import SettingsLayout from '../SettingsLayout.vue';
-
-// const router = useRouter();
-// const { t } = useI18n();
+import ConversationRequiredAttributes from 'dashboard/components-next/ConversationWorkflow/ConversationRequiredAttributes.vue';
 </script>
 
 <template>
@@ -20,8 +15,13 @@ import SettingsLayout from '../SettingsLayout.vue';
     </template>
 
     <template #body>
-      <div class="grid grid-cols-1 gap-6 2xl:grid-cols-2">
-        <span>{{ $t('CONVERSATION_WORKFLOW.INDEX.HEADER.TITLE') }}</span>
+      <div class="flex">
+        <ConversationRequiredAttributes
+          :title="$t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.TITLE')"
+          :description="
+            $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.DESCRIPTION')
+          "
+        />
       </div>
     </template>
   </SettingsLayout>