From c20c4b00c6e6f13476bbd70b8c39efd2218b5900 Mon Sep 17 00:00:00 2001
From: Gabriel Pastori <58153955+gabrielpastori1@users.noreply.github.com>
Date: Fri, 24 Nov 2023 01:40:02 -0300
Subject: [PATCH] UI improvements

---
 src/components/global/HelpTooltip.vue         | 32 +++++++++++++++++++
 src/components/instance/InstanceBody.vue      |  2 +-
 .../instance/message/HasWhatsapp.vue          |  4 +--
 src/components/instance/settings/Chatwoot.vue | 10 ++++--
 src/components/instance/settings/Typebot.vue  | 24 ++++++++++----
 src/components/modal/ConnectPhone.vue         | 22 +++++++------
 src/plugins/index.js                          |  6 +++-
 7 files changed, 77 insertions(+), 23 deletions(-)
 create mode 100644 src/components/global/HelpTooltip.vue

diff --git a/src/components/global/HelpTooltip.vue b/src/components/global/HelpTooltip.vue
new file mode 100644
index 0000000..ab3f3c5
--- /dev/null
+++ b/src/components/global/HelpTooltip.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-tooltip :text="text" style="display: inline-block" :location="location">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" icon :size="size" variant="text">
+        <v-icon>mdi-help-circle-outline</v-icon>
+      </v-btn>
+    </template>
+    <slot></slot>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: "HelpTooltip",
+  props: {
+    text: {
+      type: String,
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+    location: {
+      type: String,
+      default: "top",
+      validator: (value) => {
+        return ["top", "end", "bottom", "start"].includes(value);
+      },
+    },
+  },
+};
+</script>
diff --git a/src/components/instance/InstanceBody.vue b/src/components/instance/InstanceBody.vue
index 94bd9eb..e3844bf 100644
--- a/src/components/instance/InstanceBody.vue
+++ b/src/components/instance/InstanceBody.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-tabs v-model="tab" background-color="transparent" color="primary">
+  <v-tabs v-model="tab" background-color="transparent" color="primary" grow>
     <v-tab v-for="tab in tabs" :key="tab.id" :value="tab.id">
       <v-icon start>{{ tab.icon }}</v-icon>
       {{ tab.title }}
diff --git a/src/components/instance/message/HasWhatsapp.vue b/src/components/instance/message/HasWhatsapp.vue
index 27835d0..8b9d3e1 100644
--- a/src/components/instance/message/HasWhatsapp.vue
+++ b/src/components/instance/message/HasWhatsapp.vue
@@ -32,8 +32,7 @@
         clearable
         variant="outlined"
         density="compact"
-        hide-details="auto"
-        class="mb-3"
+        class=" mt-3"
         hint="DDI + DDD + Número"
       />
 
@@ -54,6 +53,7 @@
         :disabled="loading || !phone"
         :loading="loading"
         @click="verifyPhone"
+        variant="tonal"
       >
         Consultar
       </v-btn>
diff --git a/src/components/instance/settings/Chatwoot.vue b/src/components/instance/settings/Chatwoot.vue
index d491ecd..48ef7c2 100644
--- a/src/components/instance/settings/Chatwoot.vue
+++ b/src/components/instance/settings/Chatwoot.vue
@@ -84,12 +84,18 @@
           <div>
             <v-checkbox
               v-model="chatwootData.sign_msg"
-              label="Assinar mensagens"
               :disabled="loading"
               hide-details
               class="mb-3"
               density="compact"
-            />
+            >
+            <template v-slot:label>
+              <span>Assinar mensagens</span>
+              <HelpTooltip>
+                Adiciona o nome do atendente na primeira linha da mensagem
+              </HelpTooltip>
+            </template>
+            </v-checkbox>
           </div>
           <div>
             <v-checkbox
diff --git a/src/components/instance/settings/Typebot.vue b/src/components/instance/settings/Typebot.vue
index af04024..faeadcb 100644
--- a/src/components/instance/settings/Typebot.vue
+++ b/src/components/instance/settings/Typebot.vue
@@ -48,12 +48,13 @@
           <div class="flex-grow-1">
             <v-text-field
               v-model="typebotData.typebot"
-              label="Typebot"
+              label="Nome do fluxo do Typebot"
               :disabled="loading"
               outlined
               dense
               hide-details="auto"
               class="mb-3"
+              hint="O nome do fluxo do Typebot que será utilizado"
               :rules="[
                 (account_id) => {
                   if (!account_id) return 'Typebot é obrigatório';
@@ -72,6 +73,7 @@
               dense
               hide-details="auto"
               class="mb-3"
+              hint="Palavra-chave para finalizar o fluxo"
               :rules="[
                 (token) => {
                   if (!token)
@@ -94,6 +96,7 @@
               outlined
               dense
               hide-details="auto"
+              hint="Tempo para encerrar a sessão caso não haja interação"
               class="mb-3"
               :rules="[
                 (v) => {
@@ -109,9 +112,9 @@
               label="Tempo de atraso da mensagem (em milisegundos)"
               type="number"
               min="0"
-              :hint="`${typebotData.delay_message}ms = ${(
-                typebotData.delay_message / 1000
-              )
+              :hint="`Tempo de simulação de digitação - ${
+                typebotData.delay_message
+              }ms = ${(typebotData.delay_message / 1000)
                 .toFixed(1)
                 .replace('.0', '')}s`"
               :disabled="loading"
@@ -146,13 +149,20 @@
           ]"
         />
 
-        <div>
+        <div class="d-flex">
           <v-checkbox
+            class="flex-shrink-1"
             v-model="typebotData.listening_from_me"
             label="Ouvir mensagens enviadas por mim"
             :disabled="loading"
-            hide-details
-          ></v-checkbox>
+          >
+            <template v-slot:label>
+              <span>Ouvir mensagens enviadas por mim</span>
+              <HelpTooltip>
+                Envia as mensagens enviadas por você para o fluxo do Typebot
+              </HelpTooltip>
+            </template>
+          </v-checkbox>
         </div>
       </v-form>
     </v-card-text>
diff --git a/src/components/modal/ConnectPhone.vue b/src/components/modal/ConnectPhone.vue
index 831e398..0919f97 100644
--- a/src/components/modal/ConnectPhone.vue
+++ b/src/components/modal/ConnectPhone.vue
@@ -1,14 +1,16 @@
 <template>
-  <v-alert
-    icon="mdi-qrcode-scan"
-    v-if="instance.instance?.status != 'open'"
-    type="warning"
-  >
-    <div class="d-flex justify-space-between align-center flex-wrap">
-      <span>Telefone não conectado</span>
-      <v-btn @click="startConnect" size="small"> Conectar </v-btn>
-    </div>
-  </v-alert>
+  <v-card v-if="instance.instance?.status != 'open'" @click="startConnect" elevation="0">
+    <v-alert
+      icon="mdi-qrcode-scan"
+      color="deep-orange-darken-2"
+      class="text-white"
+    >
+      <div class="d-flex justify-space-between align-center flex-wrap">
+        <b>Telefone não conectado</b>
+        <v-btn @click="startConnect" size="small"> Conectar </v-btn>
+      </div>
+    </v-alert>
+  </v-card>
   <v-dialog v-model="dialog" max-width="350px">
     <v-card :loading="loading && qrCode">
       <v-card-text>
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 38b645e..c71748d 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -9,9 +9,13 @@ import vuetify from './vuetify'
 import pinia from '../store'
 import router from '../router'
 
-export function registerPlugins (app) {
+import HelpTooltip from '@/components/global/HelpTooltip.vue'
+
+export function registerPlugins(app) {
   app
     .use(vuetify)
     .use(router)
     .use(pinia)
+    .component('HelpTooltip', HelpTooltip)
+
 }