🎫 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

• ✅ Compatível: Vue 2.7.16+ e Vue 3.x
• ✅ Botão Flutuante: Aparece automaticamente em todas as páginas
• ✅ Plug & Play: Instalação única, funciona em toda a aplicação
• ✅ Seguro: Autenticação obrigatória
• ✅ Flexível: Configuração via plugin Vue ou props
• ✅ Simples: Instalação via npm e configuração global
• ✅ Responsivo: Interface adaptável a diferentes telas
• ✅ Notificações: Feedback visual automático
• ✅ Configurável: UUID único por cliente

📋 Pré-requisitos

• Vue.js 2.7.16+ ou Vue.js 3.x
• Token de autenticação válido no localStorage
• UUID do cliente

🚀 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'
})

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'
})

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

3. Pronto! 🎉

Após a instalação, um botão flutuante aparecerá automaticamente no canto inferior direito de todas as páginas da sua aplicação. Os usuários podem clicar nele para abrir o formulário de criação de tickets.

💻 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"

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

💻 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 formulário de ticket
3. Notificações automáticas informam sobre sucesso/erro
4. 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 (obrigatório)
  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

Com configuração global:

1. Widget carrega UUID automaticamente do plugin
2. Widget inicializa e busca cliente na API
3. Usuário clica para abrir o widget
4. Widget exibe formulário de ticket diretamente

Sem configuração ou com erro:

1. Usuário clica para abrir o widget
2. Widget exibe tela de configuração solicitando UUID
3. Usuário insere UUID do cliente
4. Widget valida UUID e busca cliente na API
5. Widget exibe formulário de ticket

Alteração de UUID:

1. Usuário clica no botão "🔄" no status do widget
2. Widget limpa configuração atual
3. Widget exibe tela de configuração novamente

🐛 Solução de Problemas

Plugin não configurado

💡 UUID do cliente não configurado via plugin.

Solução: Configure o plugin no main.js com app.use(DeepServiceDeskPlugin, { clientUuid: 'seu-uuid' }).

Token não encontrado

Token de autenticação não encontrado. Faça login no sistema.

Solução: Certifique-se de que o token está no localStorage.

Cliente não encontrado

Cliente não encontrado. Verifique se o UUID está correto.

Solução: Verifique se o UUID está correto e se o cliente existe no sistema.

📦 Build e Desenvolvimento

Para desenvolvedores do widget

# Instalar dependências
npm install

# Desenvolvimento
npm run dev

# Build para produção
npm run build

# Lint
npm run lint

📞 Suporte

Para suporte técnico, entre em contato com a equipe de desenvolvimento do Deep Service Desk.

📄 Licença

Este widget é parte do sistema Deep Service Desk.