🎫 Widget Deep Service Desk

Widget Vue.js para integração com o sistema Deep Service Desk. Permite criar tickets de forma simples e segura em qualquer aplicação Vue.js.

✨ Características

• ✅ 100% Plug & Play: Instalação única, widget completo funciona automaticamente
• ✅ TicketWidget Completo: Criação de tickets funcional por padrão
• ✅ Compatível: Vue 2.7.16+ e Vue 3.x
• ✅ Botão Flutuante: Aparece automaticamente em todas as páginas
• ✅ Seguro: Autenticação obrigatória
• ✅ Flexível: Configuração via plugin Vue ou props
• ✅ Responsivo: Interface adaptável a diferentes telas
• ✅ Notificações: Feedback visual automático
• ✅ Fallback Robusto: Funciona mesmo sem Vue disponível

📋 Pré-requisitos

• Vue.js 2.7.16+ ou Vue.js 3.x (recomendado)
• Token de autenticação válido no localStorage
• UUID do cliente (opcional - pode ser configurado via interface)

🚀 Instalação

1. Instalar via npm

npm install @pedrohrs/deep-service-desk-widget

2. Configurar no main.js

Vue 3

import { createApp } from 'vue'
import App from './App.vue'
import DeepServiceDeskPlugin from '@pedrohrs/deep-service-desk-widget'

const app = createApp(App)

app.use(DeepServiceDeskPlugin, {
  apiUrl: 'http://localhost:3000/api',
  clientUuid: 'seu-uuid-do-cliente' // Opcional
})

app.mount('#app')

Vue 2.7.16

import Vue from 'vue'
import App from './App.vue'
import DeepServiceDeskPlugin from '@pedrohrs/deep-service-desk-widget'

Vue.use(DeepServiceDeskPlugin, {
  apiUrl: 'http://localhost:3000/api',
  clientUuid: 'seu-uuid-do-cliente' // Opcional
})

new Vue({
  render: h => h(App),
}).$mount('#app')

3. Pronto! 🎉

Após a instalação, você tem automaticamente:

• ✅ Botão flutuante no canto inferior direito
• ✅ Widget completo de tickets funcionando
• ✅ Criação de tickets funcional (se Vue estiver disponível)
• ✅ Configuração de UUID via interface (se necessário)
• ✅ Notificações automáticas de sucesso/erro
• ✅ Design responsivo para mobile e desktop

💻 Funcionalidades Automáticas

Botão Flutuante

• 🔵 Posição: Canto inferior direito (responsivo)
• 🎨 Design: Gradiente moderno com efeitos hover
• 📱 Responsivo: Adapta-se a dispositivos móveis
• 🎯 Tooltip: "Abrir Suporte"

Widget Completo (v1.3.0+)

• 🎫 Criação de Tickets: Formulário completo funcional
• 🔧 Configuração Automática: UUID pode ser configurado via interface
• 🔐 Autenticação: Integração automática com sistema de auth
• 📝 Validação: Campos obrigatórios e validação em tempo real

Notificações

• ✅ Sucesso: Notificação verde quando ticket é criado
• ❌ Erro: Notificação vermelha em caso de erro
• ⏰ Auto-dismiss: Desaparecem automaticamente após 5 segundos
• 🎬 Animações: Entrada e saída suaves

🎯 Como Funciona (v1.3.0)

Cenário 1: Vue Disponível + UUID Configurado

1. Clique no botão → Widget Vue completo abre
2. Formulário de ticket totalmente funcional
3. Criação de tickets funciona normalmente
4. Notificações de sucesso/erro automáticas

Cenário 2: Vue Disponível + Sem UUID

1. Clique no botão → Widget Vue abre
2. Tela de configuração de UUID aparece
3. Após configurar → Formulário de ticket disponível
4. Funcionalidade completa ativada

Cenário 3: Vue Não Disponível

1. Clique no botão → Modal informativo abre
2. Explicação sobre funcionalidade básica
3. Orientação para usar aplicação Vue completa

💻 Uso Básico

Funcionamento Automático

Após instalar o plugin, o widget funciona automaticamente:

1. Botão flutuante aparece em todas as páginas
2. Clique no botão abre o widget completo
3. Criação de tickets funciona imediatamente (se Vue disponível)
4. Notificações automáticas informam sobre sucesso/erro
5. Eventos globais permitem integração personalizada

Escutar Eventos (Opcional)

// Escutar quando um ticket é criado
window.addEventListener('ticket-created', (event) => {
  const ticket = event.detail
  console.log('Ticket criado:', ticket)
  // Sua lógica personalizada aqui
})

// Escutar erros
window.addEventListener('ticket-error', (event) => {
  const error = event.detail
  console.error('Erro no ticket:', error)
  // Sua lógica de tratamento de erro aqui
})

Controle Programático

// Em qualquer componente Vue
export default {
  methods: {
    abrirSuporte() {
      // Abrir o widget programaticamente
      this.$deepServiceDeskButton.openTicket()
    },
    
    esconderBotao() {
      // Esconder o botão flutuante
      this.$deepServiceDeskButton.hideFloatingButton()
    },
    
    mostrarBotao() {
      // Mostrar o botão flutuante
      this.$deepServiceDeskButton.showFloatingButton()
    }
  }
}

Uso Manual (Opcional)

Se preferir usar o componente manualmente em páginas específicas:

<template>
  <div>
    <!-- Seu conteúdo -->
    <button @click="openTicketWidget">🎫 Novo Ticket</button>
    
    <!-- Widget manual -->
    <TicketWidget 
      @ticket-created="onTicketCreated"
      @ticket-error="onTicketError"
    />
  </div>
</template>

<script>
export default {
  methods: {
    openTicketWidget() {
      // Disparar evento para abrir o widget
      window.dispatchEvent(new CustomEvent('new-ticket'))
    },
    onTicketCreated(data) {
      console.log('Ticket criado:', data)
    },
    onTicketError(error) {
      console.error('Erro:', error)
    }
  }
}
</script>

🔧 Configuração Avançada

Opções do Plugin

app.use(DeepServiceDeskPlugin, {
  clientUuid: 'uuid-do-cliente',           // UUID do cliente (opcional)
  apiUrl: 'http://localhost:3000/api',     // URL da API (opcional)
  showFloatingButton: true                 // Mostrar botão flutuante (padrão: true)
})

Desabilitar Botão Flutuante

Se preferir usar apenas componentes manuais:

app.use(DeepServiceDeskPlugin, {
  clientUuid: 'seu-uuid-do-cliente',
  apiUrl: 'http://localhost:3000/api',
  showFloatingButton: false  // Desabilita o botão flutuante
})

Props do Componente (Uso Manual)

Prioridade de Configuração

1. Props do componente (maior prioridade)
2. Configuração global do plugin
3. Variáveis de ambiente
4. Configuração manual via interface

Métodos Globais Disponíveis

Eventos Globais

🔐 Autenticação

O widget busca tokens de autenticação na seguinte ordem:

1. localStorage.getItem('token-tc') (sistemas externos)
2. localStorage.getItem('token-deep') (Deep Service Desk)
3. localStorage.getItem('authToken') (genérico)

Formato do token de usuário

// user-tc ou user-deep (base64 encoded JSON)
{
  "id": 1,
  "email": "usuario@exemplo.com",
  "name": "Nome do Usuário",
  "role": "user"
}

🎨 Personalização

CSS Classes disponíveis

• .ticket-widget - Container principal
• .popup-overlay - Overlay do modal
• .popup-content - Conteúdo do modal
• .uuid-config-section - Seção de configuração do UUID
• .widget-status - Seção de status
• .ticket-form - Formulário

Exemplo de personalização

/* Personalizar cores do widget */
.ticket-widget .popup-header {
  background-color: #your-brand-color;
}

.ticket-widget .btn-submit {
  background-color: #your-brand-color;
}

🔄 Fluxo de Uso (v1.3.0)

Com Vue disponível:

1. Widget carrega automaticamente o TicketWidget completo
2. Usuário clica no botão flutuante
3. Widget abre com formulário funcional
4. Criação de tickets funciona normalmente

Sem Vue disponível:

1. Widget carrega em modo básico
2. Usuário clica no botão flutuante
3. Modal informativo explica a situação
4. Orientação para usar aplicação Vue completa

🆕 Novidades v1.3.0

• ✅ TicketWidget Completo por Padrão: Não precisa mais configurar nada adicional
• ✅ 100% Plug & Play: Instalou, funcionou
• ✅ Criação de Tickets Automática: Funcionalidade completa ativada
• ✅ Fallback Inteligente: Funciona mesmo sem Vue
• ✅ Interface Melhorada: Modal mais informativo

🔧 Migração de Versões Anteriores

De v1.2.x para v1.3.0

Antes (v1.2.x):

• Botão flutuante criava apenas FloatingTicketWidget
• Funcionalidade limitada de configuração

Agora (v1.3.0):

• Botão flutuante cria TicketWidget completo automaticamente
• Criação de tickets funciona imediatamente
• Nenhuma mudança de código necessária

Compatibilidade

A v1.3.0 é 100% compatível com versões anteriores. Nenhuma mudança de código é necessária.

📞 Suporte

Para problemas ou dúvidas:

1. Verifique o Guia de Debug
2. Consulte os logs do console do navegador
3. Teste com a versão mais recente (1.3.0+)

📄 Licença

MIT License - veja o arquivo LICENSE para detalhes.