Qualicorp Plugin LGPD

Componente Vue.js responsável por obter os assets do Plugin Wordpress GDPR Compliance e anexa-los ao front-end (Mantendo as funcionalidades nativas preservadas)

Instalação

Usando npm:

$ npm i qualicorp-plugin-lgpd

Uso

Importe o componente para usa-lo:

import pluginlgpd from "qualicorp-plugin-lgpd"

Configurando o componente

Defina uma variável contendo um objeto que será usado para setar as preferências do componente:

// Como exemplo sugiro definir no data() da aplicação Vue e usar como this.variavel
let lgpdconf = {
    // Identificação da aplicação Vue.js
    appname: "area-logada", 
    // Identificação da instalação Wordpress
    wpname: "wp-whitelabel",
    // URL contendo os endereços dos assets estáticos/textos predefinidos
    apiurl: "qualicorp.com.br/lgpd-plugin.json",
    // Definição das cores do layout do modal, infobar e botões - Definir null para manter default da api
    colors: { 
        // Cor tema do modal
        lgpdcortemamodal: '#004070',
        // Cor de fundo do modal
        lgpdcorfundomodal: '#ffffff',
        // Cor do texto da infobar
        lgpdinfobartextcolor: "#18181A",
        // Cor de fundo da infobar
        lgpdinfobarbackground: "#ffffff",
        // Cor da borda da infobar
        lgpdinfobarborder: "#004070",
        // Cor do texto dos botões
        lgpdbtncolor: "#ffffff",
        // Cor de fundo dos botões
        lgpdbtnbackground: "#004070",
        // Cor de fundo hover dos botões
        lgpdbtnhover: "#035685",
        // Cor da borda dos botões
        lgpdbtnborder: "#004070"
    },
    content: {
        // URL do custom logo a ser mostrado na modal - Definir null para manter default da api
        logourl: null, 
        // Conteúdo alternativo da infobar - Definir null para manter default da api
        infobartext: null,
        // Textos das seções do modal de preferências - Definir null para manter default da api
        secoes: {
            sobreprivacidade: {
                titulo: "Menu privacidade",
                conteudo: '<b>Conteudo da seção</b> - texto sem formatação html'
            },
            cookiesessenciais: {
                titulo: "Menu essenciais",
                conteudo: '<b>Conteudo da seção</b> - texto sem formatação html'
            },
            cookiesterceiros: {
                titulo: "Menu terceiros",
                conteudo: '<b>Conteudo da seção</b> - texto sem formatação html'
            },
            cookiesfuncionalidade: {
                titulo: "Menu funcionalidade",
                conteudo: '<b>Conteudo da seção</b> - texto sem formatação html'
            },
            politicaprivacidade: {
                titulo: "Menu politica",
                conteudo: '<b>Conteudo da seção</b> - texto sem formatação html',
                // Definição do texto/url para a politica de privacidade
                urltexto: 'Acesse <a href="http://teste.com">aqui</a> para saber mais'
            }
        },
        // Texto do botão aceitar todos os cookies - Definir null para manter default da api
        btnok: null,
        // Texto do botão salvar no modal - Definir null para manter default da api
        btnsalvar: null,
    },
    cookies: {
        // Lista de cookies essenciais - Definir null para manter default da api
        essenciais: [ 
            // Nome do cookie, Empresa origem do cookie, Tipo do cookie e duração
            { nome: 'cookie1', origem: 'Qualicorp', tipo: 'Essencial', duracao: '365 dias' },
            { nome: 'cookie2', origem: 'Qualicorp', tipo: 'Essencial', duracao: '365 dias' },
            { nome: 'cookie3', origem: 'Qualicorp', tipo: 'Essencial', duracao: '365 dias' }
        ],
        // Lista de cookies de terceiros - Definir null para manter default da api
        terceiros: [
            { nome: '_ga', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' },
            { nome: '_ga2', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' },
            { nome: '_ga3', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' },
            { nome: '_ga4', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' },
            { nome: '_ga5', origem: 'Google', tipo: 'Essencial', duracao: '365 dias' }
        ],
        // Lista de cookies de funcionalidade - Definir null para manter default da api
        funcionalidade: [
            { nome: 'advanced1', origem: 'Empresa X', tipo: 'Publicidade', duracao: '365 dias' },
            { nome: 'advanced2', origem: 'Empresa X', tipo: 'Publicidade', duracao: '365 dias' },
            { nome: 'advanced3', origem: 'Empresa X', tipo: 'Publicidade', duracao: '365 dias' },
            { nome: 'advanced4', origem: 'Empresa X', tipo: 'Publicidade', duracao: '365 dias' },
        ]
    },
    // ID do elemento HTML que receberá o evento de abrir o modal - Obs: O elemento deve existir na tela no momento em que o componente for montado
    idrenovacaoconsentimento: 'cookies-componente-modal'
}

Defina o componente na view/componente desejado no Vue.js:

<template>
  <div id="app">
    <pluginlgpd
      v-if="lgpdconf" 
      :config="lgpdconf"
      @activedthird="scriptsThirdAllowed" 
      @activedfunc="scriptsFuncAllowed" 
      @blocked="scriptsBlocked" 
    />
  </div>
</template>

Crie as três funções mencionadas na chamada do componente no template que responderão quando os eventos forem emitidos pelo componente LGPD ao usuário interagir:

export default {
    // ...
    methods: {
        scriptsThirdAllowed(appinfo){
            // Ação a ser executada quando os cookies forem permitidos
            console.log('Scripts de terceiros permitidos')   
            // appinfo retorna identificação da aplicação e da instalação Wordpress
            console.log(appinfo)
        },
        scriptsFuncAllowed(appinfo){
            // Ação a ser executada quando os cookies forem permitidos
            console.log('Scripts de funcionalidade permitidos')
            console.log(appinfo)
        },
        scriptsBlocked(appinfo){
            // Ação a ser executada quando os cookies forem permitidos
            console.log('Scripts bloqueados')
            // appinfo retorna identificação da aplicação e da instalação Wordpress
            console.log(appinfo)
        },
    },
    // ...
}