@deeprocket/deep-service-desk-widget
Version:
Widget Vue.js para integração com o sistema Deep Service Desk - Controle de visibilidade por URLs - Compatível com Vue 2.7.16 e Vue 3 - Com botão flutuante automático
2 lines • 31.3 kB
JavaScript
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["deep-service-desk-widget"]=t(require("vue")):e["deep-service-desk-widget"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(e=>(()=>{"use strict";var t={262:(e,t)=>{t.A=(e,t)=>{const n=e.__vccOpts||e;for(const[o,i]of t)n[o]=i;return n}},274:t=>{t.exports=e}},n={};function o(e){var i=n[e];if(void 0!==i)return i.exports;var r=n[e]={exports:{}};return t[e](r,r.exports,o),r.exports}(()=>{o.d=(e,t)=>{for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}})(),(()=>{o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t)})(),(()=>{o.r=e=>{"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}})(),(()=>{o.p=""})();var i={};if(o.r(i),o.d(i,{FloatingTicketWidget:()=>I,TicketWidget:()=>E,default:()=>j}),"undefined"!==typeof window){var r=window.document.currentScript,s=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);s&&(o.p=s[1])}var d=o(274);const a={class:"ticket-widget"},c={class:"popup-header"},l={key:0,class:"uuid-config-section"},u={class:"form-group"},p={key:0,class:"error-message"},m={class:"form-actions"},f={class:"form-group"},h={class:"form-group"},g={key:0,class:"error-message"},y={class:"form-actions"},b=["disabled"];function x(e,t,n,o,i,r){return(0,d.openBlock)(),(0,d.createElementBlock)("div",a,[i.showPopup?((0,d.openBlock)(),(0,d.createElementBlock)("div",{key:0,class:"popup-overlay",onClick:t[10]||(t[10]=(...e)=>r.closePopup&&r.closePopup(...e))},[(0,d.createElementVNode)("div",{class:"popup-content",onClick:t[9]||(t[9]=(0,d.withModifiers)((()=>{}),["stop"]))},[(0,d.createElementVNode)("div",c,[(0,d.createElementVNode)("button",{class:"close-btn",onClick:t[0]||(t[0]=(...e)=>r.closePopup&&r.closePopup(...e))},"×")]),r.computedClientUuid?(0,d.createCommentVNode)("",!0):((0,d.openBlock)(),(0,d.createElementBlock)("div",l,[t[12]||(t[12]=(0,d.createStaticVNode)('<div class="content-header"><h3>Precisa de ajuda?</h3><p>Fale com um de nossos especialistas</p></div><div class="config-header"><span class="config-icon">🔧</span><div class="config-details"><div class="config-title">Configuração Necessária</div><div class="config-subtitle">Configure o UUID do cliente para continuar</div></div></div>',2)),(0,d.createElementVNode)("div",u,[t[11]||(t[11]=(0,d.createElementVNode)("label",{for:"uuidInput"},"UUID do Cliente *",-1)),(0,d.withDirectives)((0,d.createElementVNode)("input",{id:"uuidInput","onUpdate:modelValue":t[1]||(t[1]=e=>i.uuidInput=e),type:"text",placeholder:"Digite o UUID do cliente (ex: 1c9eb621-b56c-43e4-b04b-b1a91b0a1809)",class:"form-input uuid-input",style:(0,d.normalizeStyle)(r.inputFocusStyle),onKeypress:t[2]||(t[2]=(...e)=>r.handleUuidKeypress&&r.handleUuidKeypress(...e))},null,36),[[d.vModelText,i.uuidInput]])]),i.uuidError?((0,d.openBlock)(),(0,d.createElementBlock)("div",p,(0,d.toDisplayString)(i.uuidError),1)):(0,d.createCommentVNode)("",!0),(0,d.createElementVNode)("div",m,[(0,d.createElementVNode)("button",{type:"button",onClick:t[3]||(t[3]=(...e)=>r.closePopup&&r.closePopup(...e)),class:"btn btn-cancel"}," Cancelar "),(0,d.createElementVNode)("button",{type:"button",onClick:t[4]||(t[4]=(...e)=>r.setClientUuid&&r.setClientUuid(...e)),class:"btn btn-submit",style:(0,d.normalizeStyle)(r.submitButtonStyle)}," ✅ Configurar UUID ",4)])])),r.computedClientUuid?((0,d.openBlock)(),(0,d.createElementBlock)("form",{key:1,onSubmit:t[8]||(t[8]=(0,d.withModifiers)(((...e)=>r.submitTicket&&r.submitTicket(...e)),["prevent"])),class:"ticket-form"},[t[15]||(t[15]=(0,d.createElementVNode)("div",{class:"content-header"},[(0,d.createElementVNode)("h3",null,"Precisa de ajuda?"),(0,d.createElementVNode)("p",null,"Fale com um de nossos especialistas")],-1)),(0,d.createElementVNode)("div",f,[t[13]||(t[13]=(0,d.createElementVNode)("label",{for:"title"},"Título *",-1)),(0,d.withDirectives)((0,d.createElementVNode)("input",{id:"title","onUpdate:modelValue":t[5]||(t[5]=e=>i.ticket.title=e),type:"text",required:"",placeholder:"Digite o título do ticket",class:"form-input",style:(0,d.normalizeStyle)(r.inputFocusStyle)},null,4),[[d.vModelText,i.ticket.title]])]),(0,d.createElementVNode)("div",h,[t[14]||(t[14]=(0,d.createElementVNode)("label",{for:"description"},"Descrição *",-1)),(0,d.withDirectives)((0,d.createElementVNode)("textarea",{id:"description","onUpdate:modelValue":t[6]||(t[6]=e=>i.ticket.description=e),required:"",placeholder:"Descreva o problema ou solicitação",class:"form-textarea",style:(0,d.normalizeStyle)(r.inputFocusStyle),rows:"4"},null,4),[[d.vModelText,i.ticket.description]])]),i.errorMessage?((0,d.openBlock)(),(0,d.createElementBlock)("div",g,(0,d.toDisplayString)(i.errorMessage),1)):(0,d.createCommentVNode)("",!0),(0,d.createElementVNode)("div",y,[(0,d.createElementVNode)("button",{type:"button",onClick:t[7]||(t[7]=(...e)=>r.closePopup&&r.closePopup(...e)),class:"btn btn-cancel"}," Cancelar "),(0,d.createElementVNode)("button",{type:"submit",class:"btn btn-submit",disabled:i.isSubmitting,style:(0,d.normalizeStyle)(r.submitButtonStyle)},(0,d.toDisplayString)(i.isSubmitting?"Enviando...":"Criar Ticket"),13,b)])],32)):(0,d.createCommentVNode)("",!0)])])):(0,d.createCommentVNode)("",!0)])}const w={name:"TicketWidget",inject:{deepServiceDeskConfig:{from:"deepServiceDeskConfig",default:()=>({})}},props:{clientUuid:{type:String,default:null},brandColor:{type:String,default:"#3b82f6"}},data(){return{showPopup:!1,isSubmitting:!1,userToken:null,userEmail:null,client:null,errorMessage:"",ticket:{title:"",description:"",type:"support",priority:"medium"},uuidInput:"",uuidError:null,configuredClientUuid:null}},computed:{computedApiUrl(){return"https://servicedesk.deeprocket.com.br/api"},computedBrandColor(){return this.brandColor||"#3b82f6"},computedBrandColorHover(){return this.darkenColor(this.computedBrandColor,.1)},computedBrandColorFocus(){return this.hexToRgba(this.computedBrandColor,.1)},submitButtonStyle(){return{backgroundColor:this.computedBrandColor,borderColor:this.computedBrandColor}},inputFocusStyle(){return{"--brand-color":this.computedBrandColor,"--brand-color-focus":this.computedBrandColorFocus}},computedClientUuid(){let e=this.configuredClientUuid||this.clientUuid||this.deepServiceDeskConfig.clientUuid;return e||(e||"undefined"===typeof window||(e=window.DEEP_SERVICE_DESK_CLIENT_UUID),e||"undefined"===typeof process||(e={NODE_ENV:"production",BASE_URL:"/"}.VUE_APP_CLIENT_UUID||{NODE_ENV:"production",BASE_URL:"/"}.VITE_CLIENT_UUID)),e||null}},mounted(){window.addEventListener("new-ticket",this.handleNewTicketEvent),this.loadClientUuidFromEnv()},beforeDestroy(){window.removeEventListener("new-ticket",this.handleNewTicketEvent)},methods:{getAuthTokenFromExternalSystem(){try{const e=localStorage.getItem("token-tc");if(e)return e;const t=localStorage.getItem("token-deep");if(t)return t;const n=localStorage.getItem("authToken");return n||null}catch(e){return console.error("Erro ao acessar token:",e),null}},getUserEmailFromExternalSystem(){try{const t=localStorage.getItem("user-tc");if(t)try{const e=JSON.parse(atob(t));return e.email||null}catch(e){}const n=localStorage.getItem("user-deep");if(n)try{const e=JSON.parse(atob(n));return e.email||null}catch(e){}return null}catch(t){return console.error("Erro ao acessar dados do usuário:",t),null}},async fetchClientByUuid(){if(!this.userToken||!this.computedClientUuid)return null;try{const e=await fetch(`${this.computedApiUrl}/clients/find-by-uuid?uuid=${encodeURIComponent(this.computedClientUuid)}`,{headers:{Authorization:`Bearer ${this.userToken}`,"Content-Type":"application/json"}});if(e.ok){const t=await e.json();return t}return e.status,null}catch(e){return console.error("Erro ao buscar cliente por UUID:",e),null}},async findClientByEmail(e){if(!e||!this.userToken)return null;try{const t=await fetch(`${this.computedApiUrl}/clients/find-by-email?email=${encodeURIComponent(e)}`,{headers:{Authorization:`Bearer ${this.userToken}`,"Content-Type":"application/json"}});if(t.ok){const e=await t.json();return e}return t.status,null}catch(t){return console.error("Erro ao buscar cliente por email:",t),null}},async fetchClients(){if(this.userToken)try{const e=await fetch(`${this.computedApiUrl}/clients`,{headers:{Authorization:`Bearer ${this.userToken}`,"Content-Type":"application/json"}});if(e.ok){const t=await e.json();this.clients=t.data||t}}catch(e){console.error("Erro ao buscar clientes:",e)}},async openPopup(){if(!this.computedClientUuid)return this.errorMessage="",void(this.showPopup=!0);await this.initializeWidget(),this.client?(this.errorMessage="",this.showPopup=!0):this.errorMessage="Erro ao configurar widget. Verifique o UUID e autenticação."},closePopup(){this.showPopup=!1,this.resetForm(),this.errorMessage=""},resetForm(){this.ticket.title="",this.ticket.description="",this.ticket.type="support",this.ticket.priority="medium"},async submitTicket(){if(this.userToken)if(this.client){this.isSubmitting=!0,this.errorMessage="";try{const e={title:this.ticket.title.trim(),description:this.ticket.description.trim(),type:this.ticket.type,priority:this.ticket.priority,status:"open",clientId:this.client.id};this.userEmail&&(e.description+=`\n\n--- Informações do Usuário ---\nEmail: ${this.userEmail}`);const t=await fetch(`${this.computedApiUrl}/tickets`,{method:"POST",headers:{Authorization:`Bearer ${this.userToken}`,"Content-Type":"application/json"},body:JSON.stringify(e)}),n=await t.json();if(t.ok)this.$emit("ticket-created",{...n,success:!0,message:"Ticket criado com sucesso!"}),this.closePopup();else{const e=n.error||"Erro ao criar ticket";this.errorMessage=e,this.$emit("ticket-error",{message:e,details:n})}}catch(e){console.error("Erro ao criar ticket:",e);const t="Erro de conexão. Verifique sua internet e tente novamente.";this.errorMessage=t,this.$emit("ticket-error",{message:t,details:e.message})}finally{this.isSubmitting=!1}}else this.errorMessage="Cliente não configurado";else this.errorMessage="Token de autenticação não encontrado"},handleNewTicketEvent(){this.openPopup()},isOpen(){return this.showPopup},loadClientUuidFromEnv(){let e=null;if(e||"undefined"===typeof window||(e=window.DEEP_SERVICE_DESK_CLIENT_UUID),e||"undefined"===typeof process||(e={NODE_ENV:"production",BASE_URL:"/"}.VUE_APP_CLIENT_UUID||{NODE_ENV:"production",BASE_URL:"/"}.VITE_CLIENT_UUID),!e)return;const t=/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;t.test(e)?(this.configuredClientUuid=e,this.initializeWidget()):console.error("❌ UUID do cliente inválido:",e)},handleUuidKeypress(e){"Enter"===e.key&&this.setClientUuid()},setClientUuid(){const e=this.uuidInput.trim();if(!e)return void(this.uuidError="Por favor, digite um UUID");const t=/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;t.test(e)?(this.configuredClientUuid=e,this.uuidInput="",this.uuidError=null,this.initializeWidget()):this.uuidError="UUID inválido. Formato esperado: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"},async initializeWidget(){return this.userToken=this.getAuthTokenFromExternalSystem(),this.userToken?(this.userEmail=this.getUserEmailFromExternalSystem(),this.client=await this.fetchClientByUuid(),this.client?void 0:(this.uuidError="Cliente não encontrado. Verifique se o UUID está correto.",void(this.configuredClientUuid=null))):(this.uuidError="Token de autenticação não encontrado. Faça login no sistema.",void(this.configuredClientUuid=null))},resetUuid(){this.configuredClientUuid=null,this.client=null,this.userToken=null,this.userEmail=null,this.uuidInput="",this.uuidError=null,this.errorMessage=""},hexToRgba(e,t=1){const n=parseInt(e.slice(1,3),16),o=parseInt(e.slice(3,5),16),i=parseInt(e.slice(5,7),16);return`rgba(${n}, ${o}, ${i}, ${t})`},darkenColor(e,t){const n=parseInt(e.replace("#",""),16),o=Math.round(2.55*t*100),i=(n>>16)-o,r=(n>>8&255)-o,s=(255&n)-o;return"#"+(16777216+65536*(i<0?0:i)+256*(r<0?0:r)+(s<0?0:s)).toString(16).slice(1)}}};var k=o(262);const v=(0,k.A)(w,[["render",x]]),E=v,C={class:"floating-ticket-widget"};function U(e,t,n,o,i,r){const s=(0,d.resolveComponent)("TicketWidget");return(0,d.openBlock)(),(0,d.createElementBlock)("div",C,[(0,d.createVNode)(s,{ref:"ticketWidget","brand-color":n.brandColor,onTicketCreated:r.onTicketCreated,onTicketError:r.onTicketError},null,8,["brand-color","onTicketCreated","onTicketError"])])}const T={name:"FloatingTicketWidget",components:{TicketWidget:E},props:{brandColor:{type:String,default:"#3b82f6"}},inject:{deepServiceDeskConfig:{from:"deepServiceDeskConfig",default:()=>({})}},mounted(){window.addEventListener("new-ticket",this.openWidget)},beforeDestroy(){window.removeEventListener("new-ticket",this.openWidget)},methods:{openWidget(){this.$refs.ticketWidget&&this.$refs.ticketWidget.openPopup()},onTicketCreated(e){window.dispatchEvent(new CustomEvent("ticket-created",{detail:e})),this.showNotification("Ticket criado com sucesso!","success")},onTicketError(e){window.dispatchEvent(new CustomEvent("ticket-error",{detail:e})),this.showNotification(e.message||"Erro ao criar ticket","error")},showNotification(e,t="info"){const n=document.createElement("div");if(n.className=`deep-service-desk-notification ${t}`,n.textContent=e,n.style.cssText=`\n position: fixed;\n top: 20px;\n right: 20px;\n background: ${"success"===t?"#10b981":"error"===t?"#ef4444":"#3b82f6"};\n color: white;\n padding: 12px 20px;\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n z-index: 10000;\n font-size: 14px;\n font-weight: 500;\n max-width: 300px;\n word-wrap: break-word;\n animation: slideInRight 0.3s ease;\n `,!document.getElementById("deep-service-desk-notification-styles")){const e=document.createElement("style");e.id="deep-service-desk-notification-styles",e.textContent="\n @keyframes slideInRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n @keyframes slideOutRight {\n from {\n transform: translateX(0);\n opacity: 1;\n }\n to {\n transform: translateX(100%);\n opacity: 0;\n }\n }\n ",document.head.appendChild(e)}document.body.appendChild(n),setTimeout((()=>{n.style.animation="slideOutRight 0.3s ease",setTimeout((()=>{n.parentNode&&n.parentNode.removeChild(n)}),300)}),5e3)}}},S=(0,k.A)(T,[["render",U]]),I=S;let D=null,V=!1;function N(){return"undefined"!==typeof window&&window.Vue?window.Vue.version||"2":"3"}function B(e){if(!e||!Array.isArray(e)||0===e.length)return!1;const t=window.location.href,n=window.location.pathname;return e.some((e=>"string"===typeof e?t.includes(e)||n.includes(e):e instanceof RegExp&&(e.test(t)||e.test(n))))}function $(e){if(document.getElementById("deep-service-desk-floating-btn"))return void P(e);const t=B(e.hiddenUrls),n=document.createElement("button");n.id="deep-service-desk-floating-btn",n.innerHTML='\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M20 2H4C2.9 2 2 2.9 2 4V22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H5.17L4 17.17V4H20V16Z" fill="currentColor"/>\n <path d="M7 9H17V11H7V9ZM7 12H17V14H7V12ZM7 6H17V8H7V6Z" fill="currentColor"/>\n </svg>\n ';const o=e.brandColor||"#3b82f6";n.style.cssText=`\n position: fixed;\n bottom: 20px;\n right: 20px;\n width: 60px;\n height: 60px;\n background: ${o};\n border: none;\n border-radius: 50%;\n color: white;\n cursor: pointer;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n z-index: 9998;\n display: ${t?"none":"flex"};\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n font-size: 0;\n `,n.addEventListener("mouseenter",(()=>{n.style.transform="scale(1.1)",n.style.boxShadow="0 6px 25px rgba(0, 0, 0, 0.2)"})),n.addEventListener("mouseleave",(()=>{n.style.transform="scale(1)",n.style.boxShadow="0 4px 20px rgba(0, 0, 0, 0.15)"})),n.addEventListener("click",(()=>{window.dispatchEvent(new CustomEvent("new-ticket"))})),n.title="Abrir Suporte",document.body.appendChild(n);const i=document.createElement("style");i.textContent="\n @media (max-width: 768px) {\n #deep-service-desk-floating-btn {\n bottom: 15px !important;\n right: 15px !important;\n width: 50px !important;\n height: 50px !important;\n }\n }\n ",document.head.appendChild(i),L(e,n)}function P(e){const t=document.getElementById("deep-service-desk-floating-btn");if(t){const n=B(e.hiddenUrls);t.style.display=n?"none":"flex","localhost"!==window.location.hostname&&"127.0.0.1"!==window.location.hostname||(console.log("[Deep Service Desk] updateButtonVisibility:"),console.log(" URL atual:",window.location.href),console.log(" hiddenUrls:",e.hiddenUrls),console.log(" shouldHide:",n),console.log(" display:",t.style.display))}}function L(e,t){if(!e.hiddenUrls||0===e.hiddenUrls.length)return;if(V)return;V=!0;let n=window.location.href;const o=()=>{const t=window.location.href;t!==n&&(n=t),P(e)},i=history.pushState,r=history.replaceState;if(history.pushState=function(){i.apply(history,arguments),setTimeout(o,50),setTimeout(o,200)},history.replaceState=function(){r.apply(history,arguments),setTimeout(o,50),setTimeout(o,200)},window.addEventListener("popstate",(()=>{setTimeout(o,50)})),window.addEventListener("hashchange",(()=>{setTimeout(o,50)})),"undefined"!==typeof MutationObserver){const e=new MutationObserver((()=>{window.location.href!==n&&setTimeout(o,100)}));e.observe(document.body,{subtree:!0,childList:!0})}if(setInterval((()=>{window.location.href!==n&&o()}),2e3),window.addEventListener("beforeunload",o),window.addEventListener("load",(()=>{setTimeout(o,100)})),(window.Vue||document.querySelector("[data-v-]"))&&window.addEventListener("vue-router-navigation",(()=>{setTimeout(o,50)})),window.React||document.querySelector("[data-reactroot]")){const e=()=>{setTimeout(o,50)};window.addEventListener("react-router-navigation",e)}const s=window.fetch;s&&(window.fetch=function(){const e=s.apply(this,arguments);return e.then((()=>{setTimeout((()=>{window.location.href!==n&&o()}),300)})).catch((()=>{setTimeout((()=>{window.location.href!==n&&o()}),300)})),e}),setTimeout(o,100)}function z(){const e=document.getElementById("deep-service-desk-floating-btn");e&&e.remove()}window.deepServiceDeskUpdateVisibility=function(){D&&P(D)};function O(e,t,n){if(document.getElementById("deep-service-desk-global-widget"))return;const o=document.createElement("div");o.id="deep-service-desk-global-widget",document.body.appendChild(o),R(e)}function R(e){const t=e||D;if(!t||!t.clientUuid)return console.error("❌ ERRO CRÍTICO: Configuração não possui clientUuid!"),console.error("❌ Config recebida:",e),void console.error("❌ Global config:",D);const n=document.getElementById("deep-service-desk-global-widget");if(!n)return;n.innerHTML=`\n <div id="independent-ticket-widget" style="display: none;">\n \x3c!-- Overlay do modal --\x3e\n <div class="widget-overlay" style="\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n ">\n <div class="widget-modal" style="\n background: white;\n border-radius: 8px;\n width: 90%;\n max-width: 500px;\n max-height: 90vh;\n overflow-y: auto;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n ">\n \x3c!-- Header simplificado --\x3e\n <div class="widget-header" style="\n display: flex;\n justify-content: flex-end;\n align-items: center;\n padding: 15px 20px;\n border-bottom: 1px solid #e5e7eb;\n background-color: #f9fafb;\n border-radius: 8px 8px 0 0;\n ">\n <button class="widget-close" style="\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n color: #6b7280;\n padding: 0;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n ">×</button>\n </div>\n \n \x3c!-- Formulário de Ticket --\x3e\n <div class="widget-form" style="padding: 24px;">\n \x3c!-- Título e subtítulo dentro do conteúdo --\x3e\n <div style="text-align: center; margin-bottom: 24px;">\n <h3 style="margin: 0 0 8px 0; color: #1f2937; font-size: 20px; font-weight: 600;">Precisa de ajuda?</h3>\n <p style="margin: 0; color: #6b7280; font-size: 14px;">Fale com um de nossos especialistas</p>\n </div>\n \n <form id="ticket-form">\n \x3c!-- Título --\x3e\n <div style="margin-bottom: 16px;">\n <label style="display: block; margin-bottom: 6px; font-weight: 500; color: #374151; font-size: 14px;">\n Título *\n </label>\n <input \n type="text" \n id="ticket-title" \n required\n style="\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n font-size: 14px;\n box-sizing: border-box;\n transition: border-color 0.2s, box-shadow 0.2s;\n "\n placeholder="Resumo do problema ou solicitação"\n />\n </div>\n \n \x3c!-- Descrição --\x3e\n <div style="margin-bottom: 20px;">\n <label style="display: block; margin-bottom: 6px; font-weight: 500; color: #374151; font-size: 14px;">\n Descrição *\n </label>\n <textarea \n id="ticket-description" \n required\n rows="6"\n style="\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n font-size: 14px;\n box-sizing: border-box;\n resize: vertical;\n min-height: 120px;\n transition: border-color 0.2s, box-shadow 0.2s;\n "\n placeholder="Descreva detalhadamente o problema ou solicitação..."\n ></textarea>\n </div>\n \n \x3c!-- Loading indicator --\x3e\n <div id="form-loading" style="display: none; text-align: center; margin: 16px 0;">\n <div style="\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 2px solid #e5e7eb;\n border-top: 2px solid #3b82f6;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n "></div>\n <span style="margin-left: 8px; color: #6b7280; font-size: 14px;">Enviando...</span>\n </div>\n \n \x3c!-- Botões --\x3e\n <div style="\n display: flex;\n gap: 12px;\n justify-content: flex-end;\n margin-top: 20px;\n ">\n <button \n type="button" \n class="widget-close" \n style="\n padding: 10px 20px;\n border: 1px solid #d1d5db;\n background-color: white;\n color: #374151;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n "\n >\n Cancelar\n </button>\n <button \n type="submit" \n id="submit-ticket"\n style="\n padding: 10px 20px;\n border: none;\n background-color: ${t.brandColor||"#3b82f6"};\n color: white;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n "\n >\n Enviar Ticket\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n \n \x3c!-- CSS para animação de loading e estilos dinâmicos --\x3e\n <style>\n spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n \n /* Hover effect no botão close */\n .widget-close:hover {\n background-color: #f3f4f6 !important;\n }\n \n /* Focus states com brand color */\n #ticket-title:focus, #ticket-description:focus {\n outline: none !important;\n border-color: ${t.brandColor||"#3b82f6"} !important;\n box-shadow: 0 0 0 3px ${t.brandColor||"#3b82f6"}20 !important;\n }\n </style>\n `;const o=n.querySelector("#independent-ticket-widget"),i=n.querySelector(".widget-overlay"),r=n.querySelectorAll(".widget-close"),s=n.querySelector("#ticket-form"),d=n.querySelector("#form-loading"),a=n.querySelector("#submit-ticket"),c=()=>{o.style.display="none",s.reset(),d.style.display="none",a.disabled=!1};r.forEach((e=>{e.addEventListener("click",c)})),i.addEventListener("click",(e=>{e.target===i&&c()})),s.addEventListener("submit",(async e=>{e.preventDefault(),d.style.display="block",a.disabled=!0;const n=t||D;if(!n||!n.clientUuid)return console.error("❌ ERRO: Não foi possível obter clientUuid!"),console.error("❌ finalConfig:",t),console.error("❌ globalConfig:",D),M("Erro: Configuração inválida. UUID do cliente não encontrado.","error"),d.style.display="none",void(a.disabled=!1);const o={title:document.getElementById("ticket-title").value,description:document.getElementById("ticket-description").value,type:"suporte",status:"pendente",priority:"media",clientUuid:n.clientUuid};try{const t=await fetch("https://servicedesk.deeprocket.com.br/api/tickets/external",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(o)}),n=t.headers.get("content-type");if(!n||!n.includes("application/json")){const e=await t.text();throw console.error("❌ Resposta não é JSON:",e),new Error(`Resposta inválida do servidor: ${e}`)}if(!t.ok){const n=await t.text();let o;console.error("❌ Erro na resposta:",n);try{o=JSON.parse(n)}catch(e){o={error:n}}throw new Error(`Erro ${t.status}: ${t.statusText} - ${o.error||n}`)}{const e=await t.json();M("Ticket criado com sucesso! Você receberá uma resposta em breve.","success"),c(),window.dispatchEvent(new CustomEvent("ticket-created",{detail:e}))}}catch(i){console.error("❌ Erro ao criar ticket:",i),console.error("❌ Stack trace:",i.stack),console.error("❌ Dados que causaram erro:",o),console.error("❌ Config usada:",n),M(`Erro ao enviar ticket: ${i.message}`,"error"),window.dispatchEvent(new CustomEvent("ticket-error",{detail:i}))}finally{d.style.display="none",a.disabled=!1}})),window.addEventListener("new-ticket",(()=>{o.style.display="block",setTimeout((()=>{document.getElementById("ticket-title").focus()}),100)}))}function M(e,t="info"){const n=document.createElement("div");if(n.className=`deep-service-desk-notification ${t}`,n.textContent=e,n.style.cssText=`\n position: fixed;\n top: 20px;\n right: 20px;\n background: ${"success"===t?"#10b981":"error"===t?"#ef4444":"#3b82f6"};\n color: white;\n padding: 12px 20px;\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n z-index: 10000;\n font-size: 14px;\n font-weight: 500;\n max-width: 300px;\n word-wrap: break-word;\n animation: slideInRight 0.3s ease;\n `,!document.getElementById("deep-service-desk-notification-styles")){const e=document.createElement("style");e.id="deep-service-desk-notification-styles",e.textContent="\n @keyframes slideInRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n @keyframes slideOutRight {\n from {\n transform: translateX(0);\n opacity: 1;\n }\n to {\n transform: translateX(100%);\n opacity: 0;\n }\n }\n ",document.head.appendChild(e)}document.body.appendChild(n),setTimeout((()=>{n.style.animation="slideOutRight 0.3s ease",setTimeout((()=>{n.parentNode&&n.parentNode.removeChild(n)}),300)}),5e3)}const F={install(e,t={}){const n={clientUuid:t.clientUuid||null,brandColor:t.brandColor||"#3b82f6",showFloatingButton:!1!==t.showFloatingButton,hiddenUrls:t.hiddenUrls||[],...t};if(!n.clientUuid)throw console.error("❌ ERRO CRÍTICO: clientUuid é obrigatório!"),console.error("❌ Configuração recebida:",t),console.error("❌ Configuração processada:",n),new Error("Deep Service Desk Widget: clientUuid é obrigatório na configuração");D=n;const o=e.version&&e.version.startsWith("3");o?(e.config.globalProperties.$deepServiceDesk=n,e.provide("deepServiceDeskConfig",n),e.component("TicketWidget",E),e.component("DeepServiceDeskWidget",E),e.component("FloatingTicketWidget",I)):(e.prototype.$deepServiceDesk=n,e.mixin({data(){return{deepServiceDeskConfig:n}},provide(){return{deepServiceDeskConfig:n}}}),e.component("TicketWidget",E),e.component("DeepServiceDeskWidget",E),e.component("FloatingTicketWidget",I));const i=()=>{n.showFloatingButton&&$(n),setTimeout((()=>{O(n,o,e)}),100)};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",i):i();const r={showFloatingButton(){$(n)},hideFloatingButton(){z()},openTicket(){window.dispatchEvent(new CustomEvent("new-ticket"))},updateUrlVisibility(){P(n)}};o?e.config.globalProperties.$deepServiceDeskButton=r:e.prototype.$deepServiceDeskButton=r}},_=F;if("undefined"!==typeof window&&window.Vue){const e=N();e.startsWith("2")&&window.Vue.use(F)}const j=_;return i})()));
//# sourceMappingURL=deep-service-desk-widget.umd.min.js.map