@bildvitta/quasar-ui-asteroid 3.17.0-beta.9 → 3.18.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.17.0-beta.9",
+  "version": "3.18.0-beta.0",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",
@@ -50,11 +50,12 @@
     "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",
     "signature_pad": "^4.1.5",
-    "sortablejs": "^1.15.0"
+    "sortablejs": "^1.15.3"
   },
   "browserslist": [
     "defaults"

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

@@ -58,7 +58,9 @@
                 </div>
               </div>
 
-              <q-item v-else :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
+              <!-- quando tem children vazio, não deve mostrar label do item, e a label do item
+              não tem "to", então validar se tem "to" para mostrar o item -->
+              <q-item v-else-if="menuItem.to" :key="index" :active="isActive(menuItem)" active-class="q-router-link--active" class="qas-app-menu__item" :to="getRouterRedirect(menuItem)">
                 <q-item-section v-if="menuItem.icon" avatar>
                   <q-icon :name="menuItem.icon" />
                 </q-item-section>
@@ -77,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>
@@ -90,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>
 
@@ -106,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'
 
@@ -114,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({
@@ -136,11 +139,6 @@ const props = defineProps({
     type: String
   },
 
-  helpChatLink: {
-    type: String,
-    default: ''
-  },
-
   items: {
     default: () => [],
     type: Array
@@ -170,6 +168,10 @@ const props = defineProps({
   title: {
     default: '',
     type: String
+  },
+
+  useChat: {
+    type: Boolean
   }
 })
 
@@ -178,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)
@@ -214,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 {
@@ -276,6 +280,9 @@ function hasSeparator (index) {
 }
 
 function isActive ({ to }) {
+  // quando o children vem vazio, "to" é "undefined", então precisa ser feito esta trativa.
+  if (!to) return false
+
   const currentPath = getNormalizedPath(router.currentRoute.value.path)
   const itemPath = typeof to === 'string' ? getNormalizedPath(to) : getPathFromObject(to)
 
@@ -296,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/components/app-user/QasAppUser.vue

@@ -108,23 +108,29 @@ const props = defineProps({
   }
 })
 
+// emits
 const emit = defineEmits(['sign-out', 'toggle-notifications'])
 
-// vindo direto do boot api.js
+// globals
 const axios = inject('axios')
 
+// composables
 const router = useRouter()
 
 const { isNotificationsEnabled, unreadNotificationsCount } = useNotifications()
 
 const { reset } = useQueryCache()
 
+const { avatarNotificationCountProps } = useAvatarNotifications()
+
+// refs
 const companiesModel = ref('')
 const loading = ref(false)
 
-const { avatarNotificationCountProps } = useAvatarNotifications()
+// consts
+const IS_ME_VERSION_2 = process.env.ME_VERSION === 2
 
-// computed
+// computeds
 const defaultCompanyProps = computed(() => {
   return {
     loading: loading.value,
@@ -148,42 +154,7 @@ watch(() => props.companyProps.modelValue, value => {
   companiesModel.value = value
 }, { immediate: true })
 
-// composable
-function useAvatarNotifications () {
-  const hasAnimated = ref(false)
-
-  watch(() => unreadNotificationsCount.value, () => {
-    hasAnimated.value = true
-
-    setTimeout(() => {
-      hasAnimated.value = false
-    }, 1000)
-  })
-
-  const avatarNotificationCountProps = computed(() => {
-    const classes = [
-      'qas-app-user__notification-avatar',
-      'animated',
-      {
-        rubberBand: hasAnimated.value
-      }
-    ]
-
-    return {
-      class: classes,
-      color: 'red-14',
-      size: 'xs',
-      title: unreadNotificationsToString.value,
-      useCropTitle: false
-    }
-  })
-
-  return {
-    avatarNotificationCountProps
-  }
-}
-
-// métodos
+// functions
 function signOut () {
   emit('sign-out')
 }
@@ -194,7 +165,10 @@ async function setCompanies (value) {
   loading.value = true
 
   try {
-    await axios.patch('users/me', { companies: value })
+    await axios.patch('users/me', {
+      [IS_ME_VERSION_2 ? 'currentMainCompany' : 'companies']: value
+    })
+
     setTimeout(() => location.reload(), 1500)
 
     NotifySuccess('Vínculo alterado com sucesso.')
@@ -224,6 +198,41 @@ function onMenuHide () {
 function toggleNotificationsDrawer () {
   emit('toggle-notifications')
 }
+
+// composables definitions
+function useAvatarNotifications () {
+  const hasAnimated = ref(false)
+
+  watch(() => unreadNotificationsCount.value, () => {
+    hasAnimated.value = true
+
+    setTimeout(() => {
+      hasAnimated.value = false
+    }, 1000)
+  })
+
+  const avatarNotificationCountProps = computed(() => {
+    const classes = [
+      'qas-app-user__notification-avatar',
+      'animated',
+      {
+        rubberBand: hasAnimated.value
+      }
+    ]
+
+    return {
+      class: classes,
+      color: 'red-14',
+      size: 'xs',
+      title: unreadNotificationsToString.value,
+      useCropTitle: false
+    }
+  })
+
+  return {
+    avatarNotificationCountProps
+  }
+}
 </script>
 
 <style lang="scss">

package/src/components/avatar/QasAvatar.vue

@@ -19,12 +19,7 @@ defineOptions({
 const props = defineProps({
   color: {
     type: String,
-    default: AvatarColors.Primary,
-    validator: value => {
-      const availableColors = Object.values(AvatarColors)
-
-      return availableColors.includes(value)
-    }
+    default: AvatarColors.Primary
   },
 
   size: {
@@ -42,6 +37,11 @@ const props = defineProps({
     type: String
   },
 
+  textColor: {
+    default: '',
+    type: String
+  },
+
   title: {
     default: '',
     type: String
@@ -62,7 +62,6 @@ const attributes = computed(() => {
     rounded,
     square,
     fontSize,
-    textColor,
     ...attributes
   } = attrs
 
@@ -76,7 +75,7 @@ const attributes = computed(() => {
   return {
     size: props.size,
     color: props.color,
-    textColor: colors[props.color],
+    textColor: colors[props.color] || props.textColor,
     ...attributes
   }
 })

package/src/components/badge/QasBadge.vue

@@ -1,10 +1,12 @@
 <template>
-  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-caption">
+  <component :is="component.is" v-bind="component.props" class="q-px-sm qas-badge text-body2">
     <slot />
   </component>
 </template>
 
 <script setup>
+import { baseProps } from '../../shared/badge-config'
+
 import { computed } from 'vue'
 
 defineOptions({
@@ -12,35 +14,7 @@ defineOptions({
   inheritAttrs: false
 })
 
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'light-blue-2'
-  },
-
-  label: {
-    type: String,
-    default: ''
-  },
-
-  multiLine: {
-    type: Boolean
-  },
-
-  textColor: {
-    type: String,
-    default: 'black'
-  },
-
-  removable: {
-    type: Boolean
-  },
-
-  tabindex: {
-    type: [String, Number],
-    default: undefined
-  }
-})
+const props = defineProps(baseProps)
 
 const emit = defineEmits(['remove'])
 const model = defineModel({ type: Boolean, default: true })