From 1265cb0ff95fda7477e871575221207de4e8ea5f Mon Sep 17 00:00:00 2001
From: Muhsin <muhsinkeramam@gmail.com>
Date: Tue, 2 Dec 2025 17:34:33 +0530
Subject: [PATCH] feat: add custom resolve attribute modal

---
 .../ConversationResolveAttributesModal.vue    | 197 ++++++++++++++++++
 .../components-next/input/ChoiceToggle.vue    |  52 +++++
 .../dashboard/i18n/locale/en/settings.json    |  19 ++
 3 files changed, 268 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue
 create mode 100644 app/javascript/dashboard/components-next/input/ChoiceToggle.vue

diff --git a/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue b/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue
new file mode 100644
index 000000000..8769a11bf
--- /dev/null
+++ b/app/javascript/dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue
@@ -0,0 +1,197 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import TextArea from 'next/textarea/TextArea.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ChoiceToggle from 'dashboard/components-next/input/ChoiceToggle.vue';
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+
+const attributes = [
+  {
+    id: 1,
+    attribute_display_name: 'Severity',
+    attribute_display_type: 'text',
+    attribute_key: 'severity',
+  },
+  {
+    id: 3,
+    attribute_display_name: 'Cloud customer',
+    attribute_display_type: 'checkbox',
+    attribute_key: 'cloud_customer',
+  },
+  {
+    id: 4,
+    attribute_display_name: 'Plan',
+    attribute_display_type: 'list',
+    attribute_key: 'plan',
+    attribute_values: ['gold', 'silver', 'bronze'],
+  },
+  {
+    id: 5,
+    attribute_display_name: 'Signup date',
+    attribute_display_type: 'date',
+    attribute_key: 'signup_date',
+  },
+  {
+    id: 6,
+    attribute_display_name: 'Home page',
+    attribute_display_type: 'link',
+    attribute_key: 'home_page',
+  },
+  {
+    id: 7,
+    attribute_display_name: 'Reg number',
+    attribute_display_type: 'number',
+    attribute_key: 'reg_number',
+  },
+].map(attribute => ({
+  ...attribute,
+  value: attribute.attribute_key,
+  label: attribute.attribute_display_name,
+  type: attribute.attribute_display_type,
+}));
+
+const formValues = ref({});
+
+const resetForm = () => {
+  formValues.value = attributes.reduce((acc, attribute) => {
+    acc[attribute.value] = '';
+    return acc;
+  }, {});
+};
+
+const open = () => {
+  resetForm();
+  dialogRef.value?.open();
+};
+
+const close = () => {
+  dialogRef.value?.close();
+};
+
+const handleConfirm = () => {
+  close();
+};
+
+const getPlaceholder = type => {
+  const placeholders = {
+    text: t(
+      'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.TEXT'
+    ),
+    number: t(
+      'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.NUMBER'
+    ),
+    link: t(
+      'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.LINK'
+    ),
+    date: t(
+      'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.DATE'
+    ),
+    list: t(
+      'CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.PLACEHOLDERS.LIST'
+    ),
+  };
+
+  return placeholders[type] || '';
+};
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    width="lg"
+    :title="t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.TITLE')"
+    :description="
+      t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.DESCRIPTION')
+    "
+    :confirm-button-label="
+      t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.ACTIONS.RESOLVE')
+    "
+    :cancel-button-label="
+      t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.ACTIONS.CANCEL')
+    "
+    @confirm="handleConfirm"
+  >
+    <div class="flex flex-col gap-4">
+      <div
+        v-for="attribute in attributes"
+        :key="attribute.value"
+        class="flex flex-col gap-2"
+      >
+        <div class="flex justify-between items-center">
+          <label class="text-sm font-medium text-n-slate-12">
+            {{ attribute.label }}
+          </label>
+        </div>
+
+        <template v-if="attribute.type === 'text'">
+          <TextArea
+            v-model="formValues[attribute.value]"
+            class="w-full"
+            :placeholder="getPlaceholder('text')"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === 'number'">
+          <Input
+            v-model="formValues[attribute.value]"
+            type="number"
+            size="md"
+            :placeholder="getPlaceholder('number')"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === 'link'">
+          <Input
+            v-model="formValues[attribute.value]"
+            type="url"
+            size="md"
+            :placeholder="getPlaceholder('link')"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === 'date'">
+          <Input
+            v-model="formValues[attribute.value]"
+            type="date"
+            size="md"
+            :placeholder="getPlaceholder('date')"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === 'list'">
+          <ComboBox
+            v-model="formValues[attribute.value]"
+            :options="
+              (attribute.attribute_values || []).map(option => ({
+                value: option,
+                label: option,
+              }))
+            "
+            :placeholder="getPlaceholder('list')"
+            class="w-full"
+          />
+        </template>
+
+        <template v-else-if="attribute.type === 'checkbox'">
+          <ChoiceToggle
+            v-model="formValues[attribute.value]"
+            :yes-label="
+              t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.CHECKBOX.YES')
+            "
+            :no-label="
+              t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.MODAL.CHECKBOX.NO')
+            "
+          />
+        </template>
+      </div>
+    </div>
+  </Dialog>
+</template>
diff --git a/app/javascript/dashboard/components-next/input/ChoiceToggle.vue b/app/javascript/dashboard/components-next/input/ChoiceToggle.vue
new file mode 100644
index 000000000..d18fdf896
--- /dev/null
+++ b/app/javascript/dashboard/components-next/input/ChoiceToggle.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  yesLabel: {
+    type: String,
+    default: 'Yes',
+  },
+  noLabel: {
+    type: String,
+    default: 'No',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const options = computed(() => [
+  { label: props.yesLabel, value: 'yes' },
+  { label: props.noLabel, value: 'no' },
+]);
+
+const handleSelect = value => {
+  emit('update:modelValue', value);
+};
+</script>
+
+<template>
+  <div
+    class="flex gap-4 items-center px-4 py-2.5 w-full bg-white rounded-lg divide-x transition-colors outline outline-1 outline-n-weak dark:bg-n-solid-1 hover:outline-n-slate-6 focus-within:outline-n-brand divide-n-weak"
+  >
+    <div
+      v-for="option in options"
+      :key="option.value"
+      class="flex flex-1 gap-2 justify-center items-center"
+    >
+      <label class="inline-flex gap-2 items-center text-base cursor-pointer">
+        <input
+          type="radio"
+          :value="option.value"
+          :checked="modelValue === option.value"
+          class="size-4 accent-n-blue-9 text-n-blue-9"
+          @change="handleSelect(option.value)"
+        />
+        <span class="text-sm text-n-slate-12">{{ option.label }}</span>
+      </label>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 407e43dda..0ddbb18a4 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -500,6 +500,25 @@
       "SAVE": {
         "SUCCESS": "Required attributes updated",
         "ERROR": "Could not update required attributes, please try again"
+      },
+      "MODAL": {
+        "TITLE": "Resolve conversation",
+        "DESCRIPTION": "Please fill in the following custom attributes before resolving this conversation",
+        "ACTIONS": {
+          "RESOLVE": "Resolve conversation",
+          "CANCEL": "Cancel"
+        },
+        "PLACEHOLDERS": {
+          "TEXT": "Write a note...",
+          "NUMBER": "Enter a number",
+          "LINK": "Add a link",
+          "DATE": "Pick a date",
+          "LIST": "Select an option"
+        },
+        "CHECKBOX": {
+          "YES": "Yes",
+          "NO": "No"
+        }
       }
     }
   },