ghatreh_user/src/App.vue

<template>
  <div class="desktopConfig w-full right-0 left-0">
    <transition mode="out-in" name="fade">
      <AConfigProvider
        v-if="!showSplash"
        :theme="{
          token: {
            colorPrimary: colors.primary,
            colorLink: colors.primary,
            colorLinkActive: colors.primary,
            colorLinkHover: colors['primary-rgba']
          }
        }"
        direction="rtl"
      >
        <router-view v-slot="{ Component, route }">
          <transition :name="route.meta.transition || 'fade'">
            <component :is="Component" :key="route.fullPath" class="app-main" />
          </transition>
        </router-view>
      </AConfigProvider>

      <div v-else class="app-splash-screen flex items-center justify-center bg-white">
        <div class="app-splash-screen__gradient app-splash-screen__gradient--top h-1/3 flex">
          <img :src="img_topGradiant" alt="" class="absolute z-10 w-full h-full object-cover" />
          <img :src="img_pattern" alt="" class="absolute w-full h-full object-none" />
        </div>
        <div class="app-splash-screen__gradient app-splash-screen__gradient--bottom h-1/3">
          <img
            :src="img_bottomGradiant"
            alt=""
            class="absolute z-10 w-full h-full object-cover"
          />
          <img :src="img_pattern" alt="" class="absolute w-full h-full object-none" />
        </div>
        <div class="splash_appear_fade_in relative z-10">
          <img :src="logoFull" class="h-[20vh] max-h-[180px] w-auto object-contain" alt="" />
        </div>
        <div class="app-splash-screen__version home_appear_fade_in_up">
          <div class="text-center text-xs">نسخه: {{ displayVersion }}</div>
        </div>
        <div class="app-splash-screen__spinner">
          <a-spin :indicator="indicator" size="small" />
        </div>
      </div>
    </transition>

    <div
      v-if="showSupportButton && !showSplash && route.name !== 'support'"
      id="support-button"
      ref="supportButtonEl"
      class="draggable-support-button"
      :class="{ 'is-dragging': supportDragging, 'is-picker-open': supportPickerOpen }"
      :style="supportButtonStyle"
      title="پشتیبانی"
      @pointerdown="onSupportPointerDown"
      @pointermove="onSupportPointerMove"
      @pointerup="handleSupportPointerUp"
      @pointercancel="onSupportPointerCancel"
    >
      <div class="support-button-inner" :style="{ '--support-accent': supportAccentColor }">
        <BasicIcon :icon="supportIcon" size="18" class="support-button-icon" />
        <span class="support-button-label">پشتیبانی</span>
        <span
          v-if="supportChatUnreadCount > 0"
          class="support-fab-badge"
        >
          {{ supportChatUnreadCount > 99 ? '99+' : supportChatUnreadCount }}
        </span>
      </div>
    </div>

    <SupportMessengerPicker
      v-model:open="supportPickerOpen"
      :entries="supportMessengerEntries"
      :anchor-el="pickerAnchorEl"
      @select="openMessengerEntry"
    />

    <VersionUpdateModal />

    <PwaInstallGuideModal
      v-model:open="guideOpen"
      :platform="platform"
      @complete="completeGuide()"
    />
  </div>
</template>

<script lang="ts" setup>
import { colors } from './themeConfig'
import pkg from '../package.json'
import { getDisplayAppVersion } from '@/config/config-cache'
import { computed, defineAsyncComponent, h, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { showBrowserNotification } from '@/utils/browserNotification'
import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
import img_pattern from '@/views/login/assets/img/pattern.svg'
import { LoadingOutlined } from '@ant-design/icons-vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { useSupportMessenger } from '@/composables/useSupportMessenger'
import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
import SupportMessengerPicker from '@/components/SupportMessengerPicker.vue'
import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'
import { usePwaInstall } from '@/composables/usePwaInstall'
import PwaInstallGuideModal from '@/components/pwa/PwaInstallGuideModal.vue'
import { useUserStore } from '@/store/userStore'
import { useSettingsStore } from '@/store/settingsStore'
import { connectChatIfExists, disconnectChat, isSettingFlagOn, unreadSupportCount, useChatService } from '@/utils/chat'
import { getToken } from '@/utils'

import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
import logoFull from '@/assets/img/logo_full_.png'

const VersionUpdateModal = defineAsyncComponent(
  () => import('@/modules/version/VersionUpdateModal.vue')
)

const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '24px'
  },
  spin: true
})
const displayVersion = getDisplayAppVersion(pkg.version)
const showSplash = ref(true)
const route = useRoute()

useApplyDesktopLayoutClass()

const {
  guideOpen,
  platform,
  completeGuide,
} = usePwaInstall()

const {
  supportPickerOpen,
  supportPickerAnchor,
  supportMessengerEntries,
  messengerMeta,
  isChatEnabled,
  hasMessengerLink: showSupportButton,
  openMessengerEntry,
  openSupportMessenger,
} = useSupportMessenger()

const supportButtonEl = ref<HTMLElement | null>(null)
const pickerAnchorEl = computed(() => supportPickerAnchor.value ?? supportButtonEl.value)

const supportChatUnreadCount = computed(() =>
  isChatEnabled.value ? Number(unreadSupportCount.value) || 0 : 0,
)

const supportIcon = computed(() => messengerMeta.value.icon)

const supportAccentColor = computed(() =>
  (messengerMeta.value.accent !== '#334155'
    ? messengerMeta.value.accent
    : colors.primary) || '#334155',
)

const {
  dragging: supportDragging,
  fabStyle: supportButtonStyle,
  handlePointerDown: onSupportPointerDown,
  handlePointerMove: onSupportPointerMove,
  handlePointerUp: supportPointerUp,
  handlePointerCancel: onSupportPointerCancel,
} = useDraggableFloatingButton('ghatreh_support_button_position_v1', {
  width: 118,
  height: 42,
  defaultBottomGap: 12,
  defaultRightOffset: 16,
})

function handleSupportPointerUp(event: PointerEvent) {
  const clicked = supportPointerUp(event)
  if (!clicked) return
  event.stopPropagation()
  void openSupportMessenger(supportButtonEl.value)
}

onMounted(async () => {
  await loadSupportMessengerFromSettings()
  setTimeout(() => {
    showSplash.value = false
  }, 2000)
})

const userStore = useUserStore()
const settingsStore = useSettingsStore()
const { latestIncomingNotification } = useChatService()
let lastConnectedChatSessionKey = ''
let lastSupportToastAt = 0

watch(
  () => [
    userStore.userInfo?.chat_room_id,
    userStore.userInfo?.chat_user_id,
    settingsStore.getSettingByKey('chat_api_key'),
    settingsStore.getSettingByKey('show_to_users_chat'),
    settingsStore.getSettingByKey('has_chat'),
    getToken(),
  ],
  async ([roomId, chatUserId, chatApiKey, chatAdminFlag, chatCustomerFlag, token]) => {
    const chatOn =
      isSettingFlagOn(chatAdminFlag) && isSettingFlagOn(chatCustomerFlag)
    if (!token || !chatOn || !chatApiKey || !roomId || !chatUserId) {
      lastConnectedChatSessionKey = ''
      disconnectChat()
      return
    }

    const sessionKey = `${roomId}:${chatUserId}:${chatApiKey}`
    if (lastConnectedChatSessionKey === sessionKey) return

    try {
      await connectChatIfExists()
      lastConnectedChatSessionKey = sessionKey
    } catch (error) {
      lastConnectedChatSessionKey = ''
      console.error('connectChatIfExists failed:', error)
    }
  },
  { immediate: true },
)

watch(latestIncomingNotification, (payload) => {
  if (!payload) return
  if (payload.at === lastSupportToastAt) return
  lastSupportToastAt = payload.at

  // فقط وقتی خارج از صفحهٔ چت (گیت داخل chat.ts)؛ داخل چت نوتیف نمی‌آید
  if (typeof document === 'undefined' || document.visibilityState === 'visible') {
    message.info({
      content: `پیام جدید پشتیبانی: ${payload.body}`,
      duration: 3,
    })
  }

  void showBrowserNotification({
    title: payload.title || 'پشتیبانی',
    body: payload.body || 'پیام جدید',
    tag: 'support-chat-message',
    url: '/support',
  })
})

</script>

<style lang="less">
.updateButton .van-dialog__confirm .van-button__text {
  color: @primary-color !important;
  font-weight: 600;
  font-size: 15px;
}

#support-button {
  position: fixed;
  z-index: 5100;
  cursor: grab;
  user-select: none;
  border-radius: 9999px;

  &.is-dragging {
    cursor: grabbing;
  }
}

.support-button-inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  direction: rtl;
  transition: box-shadow 0.2s ease, transform 0.2s ease;

  .support-button-icon {
    color: var(--support-accent, #334155);
    flex-shrink: 0;
  }

  .support-button-label {
    white-space: nowrap;
  }
}

.support-fab-badge {
  position: absolute;
  top: -6px;
  left: -4px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

#support-button:not(.is-dragging):hover .support-button-inner {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

#support-button.is-dragging .support-button-inner {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
}

#support-button.is-picker-open .support-button-inner {
  transform: scale(0.94);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

/* در دسکتاپ، دکمه پشتیبانی کنار سایدبار و پایین صفحه قرار می‌گیرد (مانند khaneghi_user) */
html.app-layout--desktop {
  #support-button {
    bottom: 12px;
    right: calc(var(--app-desktop-sidebar-width, 260px) + 20px);
  }
}
</style>