Skip to content

Instantly share code, notes, and snippets.

@elinardo10
Last active June 10, 2022 18:09
Show Gist options
  • Save elinardo10/35e10cd7df9b8e18f2ff84fe1395e193 to your computer and use it in GitHub Desktop.
Save elinardo10/35e10cd7df9b8e18f2ff84fe1395e193 to your computer and use it in GitHub Desktop.
fluxo de eventos wppconnect com nuxtjs/vue
<template>
<div class="px-6">
<div class="mb-6">
<h2 class="text-lg leading-6 font-medium text-gray-900">
{{ $t('context.whatsapp_settings.page_title') }}
</h2>
</div>
<p class="text-sm text-gray-600 ml-5 pb-6">
Aqui você vai configurar o seu Whatsapp para utilizar nas notificações de forma dinâmica no sistema.<br>
Use o card de ativação abaixo para ativar ou desativar o seu whatsapp: <br>
você só precisa abrir clicar ativar e fazer leitura do qrcode assim que o mesmo abrir.
</p>
<TWAlert
v-if="checkConnectionStatus"
variant="success"
>
<div class="flex space-x-10">
<div class="flex">
<div class="flex-shrink-0">
<!-- Heroicon name: solid/check-circle -->
<svg
class="h-5 w-5 text-green-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="ml-3 grid">
<div>
<h3 class="text-sm font-medium text-green-800">
Sessão ativa
</h3>
<div class="mt-2 text-sm text-green-700">
<p>Whatsapp conectado com sucesso!</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<div class="-mx-2 -my-1.5 ">
<TWButton
:busy="spinner.logout_session"
variant="danger"
@click.stop.prevent="logoutSession()"
>
{{ $t('context.whatsapp_settings.btn_logout_session') }}
</TWButton>
</div>
</div>
</div>
</TWAlert>
<WhatsappQrcodeConnect
@isLogged="checkConnectionStatus = true"
@logoutsession="afterLogout()"
/>
</div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex';
import WhatsappQrcodeConnect from '@/components/Whatsapp/WhatsappQrcodeConnect';
export default {
components: {
WhatsappQrcodeConnect,
},
middleware: 'auth',
data() {
return {
checkConnectionStatus: '',
spinner: {
logout_session: false,
},
};
},
computed: {
...mapState({
whatsappConnect: state => state.business.whatsappConnect,
}),
},
created() {
this.qrcodeInit();
},
methods: {
...mapMutations('app', {
$_BUSY: 'BUSY',
}),
...mapActions('business', {
$_generateTokenAndSession: 'generateTokenAndSession',
$_getBusiness: 'getBusinesses',
$_storeBusiness: 'store',
}),
...mapActions('whatsapp', {
$_startSession: 'startSession',
$_ckeckConnection: 'checkConnectionSession',
$_logoutSession: 'logoutSession',
$_closeConnection: 'closeConnection',
}),
async qrcodeInit() {
if (!this.whatsappConnect.id) {
await this.$_generateTokenAndSession().then(async() => {
const business = await this.$_getBusiness().then(response => response.data);
this.$_storeBusiness(business);
this.$_BUSY(true);
});
}
this.checkConnectionStatus = await this.$_ckeckConnection(this.whatsappConnect.id).then(response => response.status);
if (this.checkConnectionStatus === false) {
this.startSession();
}
},
startSession() {
this.$_startSession(this.whatsappConnect.id);
this.$_BUSY(true);
},
logoutSession() {
this.spinner.logout_session = true;
this.$_logoutSession(this.whatsappConnect.id);
},
afterLogout() {
this.checkConnectionStatus = false;
this.startSession();
},
},
};
</script>
import Vue from 'vue';
import Echo from 'laravel-echo';
import Cookies from 'js-cookie';
const echo = {};
echo.install = function(Vue) {
window.io = require('socket.io-client');
Vue.prototype.$echo = new Echo({
broadcaster: 'socket.io',
host: process.env.appUrlEcho,
auth: {
headers: {
Authorization: Cookies.get('_granaup._token.local'),
},
},
// namespace: 'App.V1.WhatsappConnect.Events',
});
};
Vue.use(echo);
"dependencies": {
"laravel-echo": "1.11.0",
"socket.io": "2.3.0",
"socket.io-client": "2.4.0",
},
<template>
<div>
<template v-if="initQrcode">
<TWAlert
v-if="response.variant === 'danger'"
:variant="response.variant"
dismissible
>
<span v-html="response.message" />
</TWAlert>
<TWCard>
<div class="flex">
<div>
<h2 class="text-base font-medium">
Ativar whatsapp no app:
</h2>
<p class="text-sm text-gray-600 mt-3 pb-6 mr-3">
1. Abra o whatsapp no seu celular<br>
2. Toque em "mais opções" ou "configurações" e selecione <br>"Aparelhos conectados".<br>
3. Toque em "conectar o aparelho". <br>
4. Aponte seu aparelho para essa tela para capturar o código.
</p>
</div>
<div
v-if="getQrcodeImg"
class="md:flex-shrink-0"
>
<img
:src="getQrcodeImg"
class="w-70 md:w-50 h-50 md:h-50"
>
</div>
<div
v-if="qrCodeReadError"
class="md:flex-shrink-0"
>
<a
href="#"
@click="startSession()"
>
<img
src="@/assets/img/reload-zap-button.png"
class="w-70 md:w-50 h-50 md:h-50"
>
</a>
</div>
</div>
</TWCard>
</template>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
name: 'WhatsappQrcodeConnect',
components: {
},
data() {
return {
initQrcode: false,
imgQrcode: '',
qrCodeReadError: false,
response: {
message: null,
variant: null,
},
};
},
computed: {
...mapState({
business: state => state.business.business,
whatsappConnect: state => state.business.whatsappConnect,
}),
getQrcodeImg() {
return this.imgQrcode ? `data:image/jpeg;base64,${this.imgQrcode}` : '';
},
},
mounted() {
this.$echo.channel(`qrcode-generate-${this.business.id}`)
.listen('.App\\V1\\WhatsappConnect\\Events\\WhatsappQrCodeGenerateEvent', (e) => {
if (e.data.event === 'qrcode') {
this.initQrcode = true;
this.imgQrcode = e.data.qrcode;
this.qrCodeReadError = false;
this.$_BUSY(false);
} else if ((e.data.event === 'status-find' && e.data.status === 'qrReadError') || (e.data.status === 'browserClose')) {
this.response.variant = 'danger';
this.response.message = 'Erro na leitura do código! Aponte o celular novamente para scanear';
this.imgQrcode = '';
this.qrCodeReadError = true;
if (this.$route.name === 'settings-whatsapp-config') {
setTimeout(() => {
this.startSession();
this.resetResponse();
}, 60 * 1000);
}
} else if ((e.data.event === 'status-find' && e.data.status === 'isLogged') || (e.data.event === 'status-find' && e.data.status === 'inChat') || (e.data.event === 'status-find' && e.data.status === 'qrReadSuccess')) {
this.resetResponse();
this.$emit('isLogged');
} else if ((e.data.event === 'logoutsession' && e.data.connected === false) || (e.data.event === 'status-find' && e.data.status === 'desconnectedMobile')) {
this.resetResponse();
this.$emit('logoutsession');
}
console.log('outros eventos => ', e);
});
},
methods: {
...mapActions('whatsapp', {
$_startSession: 'startSession',
}),
...mapMutations('app', {
$_BUSY: 'BUSY',
}),
startSession() {
this.resetResponse();
this.$_startSession(this.whatsappConnect.id);
this.$_BUSY(true);
},
resetResponse() {
this.response.message = null;
this.response.variant = null;
this.initQrcode = false;
this.qrCodeReadError = false;
this.$_BUSY(false);
},
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment