chatwoot-develop/app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue

<script setup>
import { computed, ref, watch } from 'vue';
import { useToggle } from '@vueuse/core';
import { useI18n } from 'vue-i18n';
import { useAlert } from 'dashboard/composables';
import { useStore } from 'dashboard/composables/store';

import CardLayout from 'dashboard/components-next/CardLayout.vue';
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import Switch from 'dashboard/components-next/switch/Switch.vue';
import Policy from 'dashboard/components/policy.vue';
import { INBOX_TYPES, getInboxIconByType } from 'dashboard/helper/inbox';

const props = defineProps({
  id: {
    type: Number,
    required: true,
  },
  inbox: {
    type: Object,
    required: true,
  },
  assistantId: {
    type: [Number, String],
    required: true,
  },
});

const emit = defineEmits(['action']);

const { t } = useI18n();
const store = useStore();

const [showActionsDropdown, toggleDropdown] = useToggle();
const isUpdating = ref(false);
const reminderToolEnabled = ref(
  props.inbox?.captain_inbox?.always_use_reminder_tool || false
);

watch(
  () => props.inbox?.captain_inbox?.always_use_reminder_tool,
  value => {
    reminderToolEnabled.value = value || false;
  }
);

const inboxName = computed(() => {
  const inbox = props.inbox;
  if (!inbox?.name) {
    return '';
  }

  const isTwilioChannel = inbox.channel_type === INBOX_TYPES.TWILIO;
  const isWhatsAppChannel = inbox.channel_type === INBOX_TYPES.WHATSAPP;
  const isEmailChannel = inbox.channel_type === INBOX_TYPES.EMAIL;

  if (isTwilioChannel || isWhatsAppChannel) {
    const identifier = inbox.messaging_service_sid || inbox.phone_number;
    return identifier ? `${inbox.name} (${identifier})` : inbox.name;
  }

  if (isEmailChannel && inbox.email) {
    return `${inbox.name} (${inbox.email})`;
  }

  return inbox.name;
});

const menuItems = computed(() => [
  {
    label: t('CAPTAIN.INBOXES.OPTIONS.DISCONNECT'),
    value: 'delete',
    action: 'delete',
    icon: 'i-lucide-trash',
  },
]);

const icon = computed(() => {
  const { medium, channel_type: type } = props.inbox;
  return getInboxIconByType(type, medium, 'outline');
});

const handleAction = ({ action, value }) => {
  toggleDropdown(false);
  emit('action', { action, value, id: props.id });
};

const toggleReminderTool = async value => {
  if (isUpdating.value) return;
  isUpdating.value = true;
  reminderToolEnabled.value = value;
  try {
    await store.dispatch('captainInboxes/update', {
      id: props.id,
      assistantId: props.assistantId,
      always_use_reminder_tool: value,
    });
    useAlert(t('CAPTAIN.INBOXES.REMINDER_TOOL.SUCCESS'));
  } catch (error) {
    reminderToolEnabled.value =
      props.inbox?.captain_inbox?.always_use_reminder_tool || false;
    useAlert(t('CAPTAIN.INBOXES.REMINDER_TOOL.ERROR'));
  } finally {
    isUpdating.value = false;
  }
};
</script>

<template>
  <!-- eslint-disable vue/no-bare-strings-in-template -->
  <CardLayout>
    <div class="flex justify-between w-full gap-1">
      <span
        class="text-base text-n-slate-12 line-clamp-1 flex items-center gap-2"
      >
        <span :class="icon" />
        {{ inboxName }}
      </span>
      <div class="flex items-center gap-2">
        <Policy
          v-on-clickaway="() => toggleDropdown(false)"
          :permissions="['administrator']"
          class="relative flex items-center group"
        >
          <Button
            icon="i-lucide-ellipsis-vertical"
            color="slate"
            size="xs"
            class="rounded-md group-hover:bg-n-alpha-2"
            @click="toggleDropdown()"
          />
          <DropdownMenu
            v-if="showActionsDropdown"
            :menu-items="menuItems"
            class="mt-1 ltr:right-0 rtl:left-0 top-full"
            @action="handleAction($event)"
          />
        </Policy>
      </div>
    </div>
    <div class="flex items-center justify-between mt-3 text-xs text-n-slate-11">
      <span>{{ t('CAPTAIN.INBOXES.REMINDER_TOOL.LABEL') }}</span>
      <Switch
        v-model="reminderToolEnabled"
        :disabled="isUpdating"
        @update:model-value="toggleReminderTool"
      />
    </div>
    <p class="mt-1 text-xs text-n-slate-10">
      {{ t('CAPTAIN.INBOXES.REMINDER_TOOL.HELP') }}
    </p>
  </CardLayout>
</template>