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

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>