@bildvitta/quasar-ui-asteroid 3.17.0-beta.28 → 3.17.0-beta.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.17.0-beta.28",
+  "version": "3.17.0-beta.29",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -50,6 +50,7 @@
     "date-fns": "^2.30.0",
     "debug": "^4.3.4",
     "fuse.js": "^6.6.2",
+    "gleap": "^14.2.7",
     "humps": "^2.0.1",
     "lodash-es": "^4.17.21",
     "pica": "^9.0.1",

package/src/components/app-menu/QasAppMenu.vue

@@ -79,8 +79,8 @@
 
         <div v-if="showAppUser">
           <!-- Chat Ajuda -->
-          <q-list v-if="helpChatLink" class="q-mt-xl">
-            <q-item class="q-mb-md text-primary" clickable>
+          <q-list v-if="useChat" class="q-mt-xl">
+            <q-item class="q-mb-md text-primary" clickable @click="toggleChat">
               <q-item-section avatar>
                 <q-icon name="sym_r_chat" />
               </q-item-section>
@@ -92,8 +92,6 @@
                   </div>
                 </q-item-label>
               </q-item-section>
-
-              <pv-app-menu-help-chat :link="props.helpChatLink" :mini-brand="props.miniBrand" @update:model-value="setHasOpenedHelpChat" />
             </q-item>
           </q-list>
 
@@ -108,7 +106,6 @@
 </template>
 
 <script setup>
-import PvAppMenuHelpChat from './private/PvAppMenuHelpChat.vue'
 import PvAppMenuDropdown from './private/PvAppMenuDropdown.vue'
 import QasAppUser from '../app-user/QasAppUser.vue'
 
@@ -116,8 +113,12 @@ import useAppMenuDropdown from './composables/use-app-menu-dropdown'
 import useAppUser from './composables/use-app-user'
 import useDevelopmentBadge from './composables/use-development-badge'
 import { useScreen } from '../../composables'
+import { useAuthUser } from '../../composables/private'
+
+import { handleProcess } from '../../helpers'
 
-import { ref, computed, watch } from 'vue'
+import Gleap from 'gleap'
+import { ref, computed, watch, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 defineOptions({
@@ -138,11 +139,6 @@ const props = defineProps({
     type: String
   },
 
-  helpChatLink: {
-    type: String,
-    default: ''
-  },
-
   items: {
     default: () => [],
     type: Array
@@ -172,6 +168,10 @@ const props = defineProps({
   title: {
     default: '',
     type: String
+  },
+
+  useChat: {
+    type: Boolean
   }
 })
 
@@ -180,6 +180,8 @@ const emit = defineEmits(['sign-out', 'update:modelValue', 'toggle-notifications
 const screen = useScreen()
 const router = useRouter()
 
+const { toggleChat } = useChatMenu()
+
 const rootRoute = router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
 
 const hasOpenedMenu = ref(false)
@@ -216,7 +218,7 @@ const isMiniMode = computed(() => {
   return screen.isLarge && isMini.value && !hasOpenedMenu.value && !hasOpenedHelpChat.value
 })
 
-const menuClasses = computed(() => ({ 'qas-app-menu__menu--spaced': !props.helpChatLink }))
+const menuClasses = computed(() => ({ 'qas-app-menu__menu--spaced': !props.useChat }))
 
 const classes = computed(() => {
   return {
@@ -301,8 +303,59 @@ function setHasOpenedMenu (value) {
   hasOpenedMenu.value = value
 }
 
-function setHasOpenedHelpChat (value) {
-  hasOpenedHelpChat.value = value
+// composables definitions
+function useChatMenu () {
+  // composables
+  const { user, hasUser } = useAuthUser()
+
+  // consts
+  const isMeVersionTwo = process.env.ME_VERSION === 2
+
+  // hooks
+  onMounted(initializeChat)
+
+  // functions
+  function initializeChat () {
+    const gleapEnv = handleProcess(() => process.env.GLEAP)
+
+    if (!props.useChat || !gleapEnv || !hasUser.value) return
+
+    Gleap.initialize(gleapEnv)
+    Gleap.setLanguage('pt-BR')
+
+    const {
+      uuid,
+      name,
+      email,
+      callingCode,
+      phone,
+      companyLink,
+      companyLinksOptions,
+      mainCompanyOptions, // somente na v2
+      currentMainCompany // somente na v2
+    } = user.value
+
+    const companyId = isMeVersionTwo ? currentMainCompany : companyLink
+    const companyNameList = isMeVersionTwo ? mainCompanyOptions : companyLinksOptions
+    const companyName = companyNameList?.find(({ value }) => value === companyId)?.label
+
+    Gleap.identify(uuid, {
+      name,
+      email,
+      phone: `+${callingCode || '55'}${phone}`,
+      companyId,
+      companyName
+    })
+  }
+
+  function toggleChat () {
+    Gleap.isOpened() ? Gleap.close() : Gleap.open()
+  }
+
+  return {
+    initializeChat,
+    toggleChat
+  }
 }
 </script>
 

package/src/components/app-menu/QasAppMenu.yml

@@ -15,11 +15,6 @@ props:
     type: String
     required: true
 
-  help-chat-link:
-    desc: Link para ser usado no iframe do chat, caso não passe nada, o chat não será exibido.
-    type: String
-    default: ''
-
   items:
     desc: Itens do menu.
     type: Array
@@ -49,6 +44,11 @@ props:
     desc: Título que vai ficar no label do select de módulos.
     type: String
 
+  use-chat:
+    desc: Componente para controlar se vai ter ou não o chat.
+    type: Boolean
+    default: true
+
 slots:
   user:
     desc: Slot para acessar o menu de usuário.

package/src/composables/private/index.js

@@ -1,3 +1,4 @@
 export { default as useView } from './use-view'
 export { default as useGenerator } from './use-generator'
 export { default as useToggleVisibility } from './use-toggle-visibility'
+export { default as useAuthUser } from './use-auth-user'

package/src/composables/private/use-auth-user.js

@@ -0,0 +1,20 @@
+import { LocalStorage } from 'quasar'
+
+import { computed, ref } from 'vue'
+
+const user = ref(LocalStorage.getItem('user'))
+
+export default function useAuthUser () {
+  window.addEventListener('message', ({ data }) => {
+    if (data.type !== 'updateUser') return
+
+    user.value = data.user
+  })
+
+  const hasUser = computed(() => !!user.value)
+
+  return {
+    user,
+    hasUser
+  }
+}

package/src/components/app-menu/private/PvAppMenuHelpChat.vue

@@ -1,222 +0,0 @@
-<!-- O chat em si é renderizado em um iframe, o que QMenu, toda vez que fecha se auto destroy, então não podemos usar o
-iframe dentro do QMenu, pois toda vez que um iframe é destruído ele perde o seu estado, e teria que iniciar um novo chat,
-pra isto é criado um iframe no body, e posicionado com JS + CSS para ficar sobre o QMenu. -->
-
-<template>
-  <q-menu class="pv-app-menu-help-chat shadow-2" v-bind="menuProps">
-    <header class="q-pa-md">
-      <q-img class="q-mb-md" :src="props.miniBrand" width="36px" />
-
-      <h3 class="text-h3">
-        Bem-vindo!
-      </h3>
-
-      <div class="text-body1">
-        Deixe a sua mensagem para o suporte técnico da Nave.
-      </div>
-    </header>
-
-    <qas-box class="full-width pv-app-menu-help-chat__content relative-position" :class="boxClasses">
-      <div v-if="showIframe" ref="chatContent" class="full-width" />
-
-      <div v-else class="full-width self-end">
-        <div class="q-mb-sm text-subtitle2">
-          Estamos conectados
-        </div>
-
-        <div class="text-body2">
-          Normalmente responde em alguns minutos
-        </div>
-
-        <qas-btn class="full-width q-mt-lg" label="Iniciar conversa" variant="primary" @click="initializeChat" />
-      </div>
-
-      <q-inner-loading :showing="showInnerLoading">
-        <q-spinner color="grey" size="2rem" />
-      </q-inner-loading>
-    </qas-box>
-  </q-menu>
-</template>
-
-<script setup>
-import { useScreen } from '../../../composables'
-
-import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue'
-
-defineOptions({ name: 'PvAppMenuHelpChat' })
-
-const props = defineProps({
-  link: {
-    type: String,
-    default: ''
-  },
-
-  miniBrand: {
-    type: String,
-    default: ''
-  }
-})
-
-const screen = useScreen()
-
-// refs
-const chatContent = ref(null)
-const isOpened = ref(false)
-const showIframe = ref(false)
-const showInnerLoading = ref(false)
-
-// computed
-const boxClasses = computed(() => {
-  return {
-    flex: !showIframe.value,
-    'pv-app-menu-help-chat__content--is-opened': showIframe.value
-  }
-})
-
-const menuProps = computed(() => {
-  return {
-    anchor: screen.isSmall ? 'top middle' : 'top right',
-    maxWidth: screen.isSmall ? '300px' : '400px',
-    self: screen.isSmall ? 'bottom middle' : 'top left',
-    touchPosition: !screen.isSmall,
-
-    onBeforeHide: hideIframe,
-    onShow
-  }
-})
-
-// hooks
-
-/**
- * Toda vez que a prop "behavior" do componente "QasAppMenu" é alterada, este componente
- * é renderizado novamente, então é necessário esconder o iframe caso ele ja esteja aberto.
- */
-onMounted(hideIframe)
-
-onUnmounted(() => {
-  if (showIframe.value) {
-    window.removeEventListener('scroll', onScroll)
-    window.removeEventListener('resize', onScroll)
-  }
-})
-
-// functions
-
-/**
- * Define o estilo do iframe de acordo com a posição do "chatContent" dentro
- * do QMenu.
- */
-async function setIframeStyle () {
-  await nextTick()
-
-  const iframe = getIframe()
-
-  if (!iframe || !chatContent.value) return
-
-  const { bottom, left, top } = chatContent.value.getBoundingClientRect()
-
-  const width = chatContent.value.offsetWidth
-
-  const styles = {
-    display: 'block',
-    top: `${bottom + window.scrollY}px`,
-    left: `${left + window.scrollX}px`,
-    bottom: `${top}px`,
-    width: `${width}px`
-  }
-
-  Object.assign(iframe.style, styles)
-}
-
-function onShow () {
-  isOpened.value = true
-
-  if (showIframe.value) setIframeStyle()
-}
-
-function hideIframe () {
-  isOpened.value = false
-
-  const iframe = getIframe()
-
-  if (!iframe) return
-
-  iframe.style.display = 'none'
-}
-
-function onScroll () {
-  if (isOpened.value) setIframeStyle()
-}
-
-function createIframe () {
-  const iframe = document.createElement('iframe')
-
-  iframe.id = 'chat-iframe'
-  iframe.className = 'pv-app-menu-help-chat__iframe'
-  iframe.style.display = 'none'
-  iframe.src = props.link
-
-  document.body.appendChild(iframe)
-}
-
-function getIframe () {
-  return document.getElementById('chat-iframe')
-}
-
-function initializeChat () {
-  createIframe()
-
-  window.addEventListener('scroll', onScroll)
-  window.addEventListener('resize', onScroll)
-
-  toggleIframe()
-}
-
-function toggleIframe () {
-  showIframe.value = !showIframe.value
-
-  showInnerLoading.value = true
-
-  /**
-   * É adicionado um loading por 3 motivos:
-   * - o iframe demora um pouco para ser carregado
-   * - o loading é um feedback visual para o usuário enquanto o iframe é carregado
-   * - não é possível adicionar uma animação aparecendo o iframe, então desta
-   * forma fica suavizado
-   */
-  setTimeout(async () => {
-    showInnerLoading.value = false
-
-    await nextTick()
-
-    onShow()
-  }, 2000)
-}
-</script>
-
-<style lang="scss">
-.pv-app-menu-help-chat {
-  overflow-y: hidden;
-
-  &__content {
-    height: 260px;
-    background-color: var(--qas-background-color) !important;
-  }
-
-  &__iframe {
-    border: 0;
-    border-radius: var(--qas-generic-border-radius);
-    outline: none;
-    position: absolute;
-    height: calc(260px - calc(var(--qas-spacing-md) * 2));
-    z-index: 9999;
-  }
-
-  // Media: isSmall
-  @media (max-width: $breakpoint-sm-min) {
-    &__content--is-opened {
-      padding: var(--qas-spacing-sm) !important;
-    }
-  }
-}
-</style>