@betha-plataforma/estrutura-componentes
Version:
Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.
439 lines (438 loc) • 17.3 kB
JavaScript
import { Component, h, Prop, State, Watch, Method } from '@stencil/core';
import { isNill } from '../../utils/functions';
import { LicencasService } from './licencas.service';
/**
* Componente do menu Suporte com Blip Chat
*
* @see https://gitlab.services.betha.cloud/ped/tecnologia/nlp/blip-webchat-loader
* @see https://gitlab.services.betha.cloud/ped/suite/atendimento/components/suite-atendimento
*/
export class Suporte {
constructor() {
/**
* Habilita ou desabilita o Blip Chat
*/
this.blipChat = false;
/**
* Usar estilos que este componente fornece
*/
this.blipChatCustomStyle = false;
/**
* Indica se a aplicação já possui botão flutuante
*/
this.fabButton = false;
/**
* Habilita ou desabilita o botão de abrir um chamado no atendimento
*/
this.atendimento = false;
this.blipChatCounter = 0;
this.onSuporteViaChatClick = async (event) => {
event.preventDefault();
if (!this.blipChat) {
return;
}
const blipChatElement = document.querySelector('#blip-chat-open-iframe');
if (!isNill(blipChatElement)) {
blipChatElement.click();
}
};
this.initBlipChat = () => {
this.setupBlipChat(this.blipChatUserInfo);
window.addEventListener('message', this.handleBlipChatEvents);
};
this.setupBlipChat = (blipChatUserInfo) => {
this.setupBlipChatScript(blipChatUserInfo);
if (this.blipChatCustomStyle) {
this.setupBlipChatStyles();
}
};
this.setupBlipChatScript = (blipChatUserInfo) => {
const script = document.createElement('script');
script.src = 'https://resources.tecnologia.betha.cloud/blip-webchat/1.1/loader.js';
if (!isNill(this.blipChatFabButtonColor)) {
script.setAttribute('custom-color', this.blipChatFabButtonColor);
}
document.head.appendChild(script);
const userInfo = {
id: blipChatUserInfo.id,
nome: blipChatUserInfo.nome,
emails: {
primario: blipChatUserInfo.email
}
};
script.onload = () => window.postMessage(JSON.stringify({ event: 'BLIP_WEBCHAT', userInfo }), '*');
};
this.setupBlipChatStyles = () => {
const style = document.createElement('style');
const textCss = document.createTextNode(`
#blip-chat-container #blip-chat-open-iframe {
max-width: 50px !important;
min-width: 50px !important;
max-height: 50px !important;
min-height: 50px !important;
right: 14px !important;
box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
${this.fabButton ? 'bottom: 75px !important;' : ''}
}
#blip-chat-container #blip-chat-iframe {
${this.fabButton ? 'bottom: 135px !important;' : 'bottom: 99px !important;'}
}
screen and (min-width: 1024px) {
#blip-chat-container #blip-chat-iframe.blip-chat-iframe-opened {
height: 480px !important;
width: 380px !important;
}
}
screen and (min-width: 768px) {
#blip-chat-container #blip-chat-iframe {
right: 14px !important;
}
}
`);
style.setAttribute('type', 'text/css');
style.appendChild(textCss);
document.head.appendChild(style);
};
this.handleBlipChatEvents = (event) => {
if (!event.data || typeof event.data !== 'string' || !event.data.startsWith('{')) {
return;
}
try {
const data = JSON.parse(event.data);
const eventName = data.event;
if (eventName && eventName === 'BLIP_WEBCHAT_NOTIFICATION') {
const { pendingMessages } = data;
this.blipChatCounter = pendingMessages;
}
}
catch (err) {
console.error(err);
}
};
this.isBlipChatOnline = () => {
if (this.blipChat) {
const now = Date.now() - (3 * 60 * 60 * 1000);
const hours = Math.floor((now / (60 * 60 * 1000)) % 24);
const minutes = Math.floor((now / (60 * 1000)) % 60);
if (this.isBetween8h30mAnd12h(hours, minutes) || this.isBetween13h30mAnd18h(hours, minutes)) {
return true;
}
}
return false;
};
this.isBetween8h30mAnd12h = (hours, minutes) => (((hours == 8 && minutes >= 30) || (hours >= 9)) && hours <= 11);
this.isBetween13h30mAnd18h = (hours, minutes) => (((hours == 13 && minutes >= 30) || (hours >= 14)) && hours <= 17);
this.onAtendimentoClick = async (event) => {
event.preventDefault();
if (!this.atendimento) {
return;
}
if (isNill(this.getLicencasApi()) || this.authorization === undefined) {
console.warn('[bth-suporte] O endereço do serviço de licenças e as credenciais de autenticação devem ser informados. Consulte a documentação do componente.');
return;
}
const licencasService = new LicencasService(this.authorization, this.getLicencasApi());
licencasService.carregarAtendimento().then(atendimento => {
if (atendimento) {
window.open(atendimento.novo, '_blank');
}
});
};
}
async watchBlipChatUserInfo() {
await this.loadBlipChat();
}
/**
* Carrega o Blip Chat
*/
async loadBlipChat() {
if (this.blipChat && !isNill(this.blipChatUserInfo)) {
this.initBlipChat();
this.checkBlipChat();
}
}
/**
* Método para testar recebimento de uma mensagem do window para definir o badge de mensagens não vistas,
* através de um evento do tipo 'BLIP_WEBCHAT_NOTIFICATION' emitido pelo loader do Blip Chat
* @see https://gitlab.services.betha.cloud/ped/tecnologia/nlp/blip-webchat-loader
*/
async handleWindowMessage(data) {
if (this.blipChat && !isNill(this.blipChatUserInfo)) {
this.handleBlipChatEvents({ data: JSON.stringify(data) });
}
}
componentWillLoad() {
if (this.blipChat) {
this.loadBlipChat();
window.setInterval(() => this.checkBlipChat(), 2 * 60 * 1000);
}
}
render() {
return (h("bth-menu-ferramenta", { descricao: "Suporte", tituloPainelLateral: "Suporte" },
h("bth-menu-ferramenta-icone", { slot: "menu_item_desktop", icone: "headset", contador: this.blipChatCounter, status: this.blipChatStatus }),
h("span", { slot: "menu_descricao_desktop", class: "descricao-desktop" }, "Suporte"),
h("bth-menu-ferramenta-icone", { slot: "menu_item_mobile", icone: "headset", mobile: true, contador: this.blipChatCounter }),
h("span", { slot: "menu_descricao_mobile", class: "descricao-mobile" }, "Suporte"),
h("div", { slot: "conteudo_painel_lateral", class: "suporte" },
h("ul", null,
this.blipChat && (h("li", null,
h("a", { class: "bth__card bth__card--clickable", onClick: this.onSuporteViaChatClick, title: "Suporte via chat", "aria-label": "Acessar o chat do suporte", "aria-disabled": "false" },
h("div", { class: "chat-status" },
h("bth-icone", { icone: "message-outline", title: "Chat" }),
this.blipChatStatus == 'online' && this.blipChatCounter == 0
&& (h("span", { class: "badge status status--success" }, "Online")),
this.blipChatCounter > 0
&& (h("span", { class: "badge status status--danger" }, "Novas mensagens"))),
h("span", { class: "descricao twoline-ellipsis" }, "Suporte via chat")))),
h("li", null,
h("a", { class: "bth__card bth__card--clickable", href: this.getCentralAjudaHome(), target: "_blank", rel: "noreferrer", title: "Central de ajuda", "aria-label": "Acessar a Central de ajuda", "aria-disabled": "false" },
h("bth-icone", { icone: "help-circle-outline", title: "Chat" }),
h("span", { class: "descricao twoline-ellipsis" }, "Central de ajuda"))),
this.atendimento && (h("li", null,
h("a", { class: "bth__card bth__card--clickable", onClick: this.onAtendimentoClick, title: "Abrir um chamado", "aria-label": "Abrir um chamado", "aria-disabled": "false" },
h("bth-icone", { icone: "plus-thick", title: "Plus" }),
h("span", { class: "descricao twoline-ellipsis" }, "Abrir um chamado"))))))));
}
getCentralAjudaHome() {
if (!isNill(this.centralAjudaHome)) {
return this.centralAjudaHome;
}
if ('___bth' in window) {
return window['___bth'].envs.suite['central-de-ajuda'].v1['host-redirecionamento'];
}
return null;
}
checkBlipChat() {
this.blipChatStatus = this.isBlipChatOnline() ? 'online' : 'offline';
}
getLicencasApi() {
if (!isNill(this.licencasApi)) {
return this.licencasApi;
}
if ('___bth' in window) {
return window['___bth'].envs.suite['licenses'].v1.host;
}
return null;
}
static get is() { return "bth-suporte"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["suporte.scss"]
}; }
static get styleUrls() { return {
"$": ["suporte.css"]
}; }
static get properties() { return {
"blipChat": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Habilita ou desabilita o Blip Chat"
},
"attribute": "blip-chat",
"reflect": false,
"defaultValue": "false"
},
"blipChatUserInfo": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "BlipChatUserInfo",
"resolved": "BlipChatUserInfo",
"references": {
"BlipChatUserInfo": {
"location": "import",
"path": "./suporte.interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Usu\u00E1rio de sess\u00E3o do Blip Chat"
}
},
"blipChatCustomStyle": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Usar estilos que este componente fornece"
},
"attribute": "blip-chat-custom-style",
"reflect": false,
"defaultValue": "false"
},
"blipChatFabButtonColor": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Cor do bot\u00E3o flutuante do Blip Chat"
},
"attribute": "blip-chat-fab-button-color",
"reflect": false
},
"fabButton": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indica se a aplica\u00E7\u00E3o j\u00E1 possui bot\u00E3o flutuante"
},
"attribute": "fab-button",
"reflect": false,
"defaultValue": "false"
},
"centralAjudaHome": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "URL para a home da central de ajuda. Por padr\u00E3o ir\u00E1 obter do env.js"
},
"attribute": "central-ajuda-home",
"reflect": false
},
"atendimento": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Habilita ou desabilita o bot\u00E3o de abrir um chamado no atendimento"
},
"attribute": "atendimento",
"reflect": false,
"defaultValue": "false"
},
"authorization": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "AuthorizationConfig",
"resolved": "AuthorizationConfig",
"references": {
"AuthorizationConfig": {
"location": "import",
"path": "../../global/interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Configura\u00E7\u00E3o de autoriza\u00E7\u00E3o. \u00C9 necess\u00E1ria para o componente poder autenticar com os servi\u00E7os."
}
},
"licencasApi": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "URL para a api de licen\u00E7as. Por padr\u00E3o ir\u00E1 obter do env.js."
},
"attribute": "licencas-api",
"reflect": false
}
}; }
static get states() { return {
"blipChatCounter": {},
"blipChatStatus": {}
}; }
static get methods() { return {
"loadBlipChat": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Carrega o Blip Chat",
"tags": []
}
},
"handleWindowMessage": {
"complexType": {
"signature": "(data: any) => Promise<void>",
"parameters": [{
"tags": [],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "M\u00E9todo para testar recebimento de uma mensagem do window para definir o badge de mensagens n\u00E3o vistas,\natrav\u00E9s de um evento do tipo 'BLIP_WEBCHAT_NOTIFICATION' emitido pelo loader do Blip Chat",
"tags": [{
"name": "see",
"text": "https://gitlab.services.betha.cloud/ped/tecnologia/nlp/blip-webchat-loader"
}]
}
}
}; }
static get watchers() { return [{
"propName": "blipChatUserInfo",
"methodName": "watchBlipChatUserInfo"
}]; }
}