ghatreh_user/src/App.vue

<template>
  <div class="desktopConfig w-full right-0 left-0">
    <transition mode="out-in" name="fade">
      <AConfigProvider
        :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>
    </transition>

    <div
      v-if="showSupportButton && route.name !== 'support' && !hideAppChrome"
      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-if="!hideAppChrome"
      v-model:open="guideOpen"
      :platform="platform"
      @complete="completeGuide()"
    />

    <div
      v-if="!hideAppChrome && !isDesktop"
      class="app-credit-footer app-credit-footer--mobile"
      :class="{ 'app-credit-footer--login': isLoginRoute }"
    >
      <EnamadBadge v-if="isLoginRoute" size="sm" />
      <AppCreditLink variant="mobile" />
    </div>
    <div
      v-if="!hideAppChrome && showDesktopFloatingCredit"
      class="app-credit-footer app-credit-footer--desktop-float"
      :class="{ 'app-credit-footer--login': isLoginRoute }"
    >
      <EnamadBadge v-if="isLoginRoute" size="sm" />
      <AppCreditLink variant="float" />
    </div>

    <GoldDayCalculatorModal />
    <GoldLoading v-model:show="colleagueOrderWaiting" />
  </div>
</template>

<script lang="ts" setup>
import { colors } from './themeConfig'
import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { showBrowserNotification } from '@/utils/browserNotification'
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, useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
import AppCreditLink from '@/components/AppCreditLink.vue'
import EnamadBadge from '@/components/EnamadBadge.vue'
import { usePwaInstall } from '@/composables/usePwaInstall'
import PwaInstallGuideModal from '@/components/pwa/PwaInstallGuideModal.vue'
import GoldDayCalculatorModal from '@/components/GoldDayCalculatorModal.vue'
import GoldLoading from '@/components/GoldLoading.vue'
import { colleagueOrderWaiting, resumeColleagueOrderIfPending } from '@/composables/useColleagueOrderWait'
import { useUserStore } from '@/store/userStore'
import { useSettingsStore } from '@/store/settingsStore'
import { connectChatIfExists, disconnectChat, isSettingFlagOn, unreadSupportCount, useChatService } from '@/utils/chat'
import { getToken } from '@/utils'

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

const route = useRoute()
const hideAppChrome = computed(() => route.meta.hideChrome === true || route.name === 'tvMonitor')

useApplyDesktopLayoutClass()

const isDesktop = useDesktopBreakpoint()
const showDesktopFloatingCredit = computed(() => {
  if (!isDesktop.value) return false
  return route.name === 'login' || !!route.meta.hideMenu
})
const isLoginRoute = computed(() => route.name === 'login')

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()
})

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(
  () => getToken(),
  (token) => {
    if (token) void resumeColleagueOrderIfPending()
  },
  { 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">
.app-credit-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000000;
  box-sizing: content-box;
}

.app-credit-footer--mobile {
  width: 100%;
  max-width: 426px;
  margin-left: auto;
  margin-right: auto;
  min-height: var(--app-credit-bar-inner);
  padding: 4px 0 var(--app-safe-bottom);
  background: #fff;
  box-shadow: 0 -2px 4px -2px #0000001a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 9px;
}

.app-credit-footer--login.app-credit-footer--mobile {
  min-height: 72px;
}

:root:has(.app-credit-footer--login) {
  --app-credit-bar-inner: 72px;
}

.app-credit-footer--desktop-float {
  left: auto;
  right: 20px;
  bottom: 16px;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.app-credit-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;

  &:hover {
    opacity: 0.85;
  }

  &__text {
    font-weight: 500;
    white-space: nowrap;
  }

  &__logo {
    width: auto;
    object-fit: contain;
  }

  &--mobile {
    gap: 4px;
    padding: 4px 0;
    color: inherit;

    .app-credit-link__logo {
      height: 12px;
    }
  }

  &--sidebar {
    flex-direction: column;
    gap: 6px;
    padding: 4px;
    color: #9ca3af;
    font-size: 10px;

    .app-credit-link__logo {
      height: 15px;
      opacity: 0.85;
    }
  }

  &--float {
    gap: 6px;
    padding: 7px 14px;
    font-size: 10px;
    color: #6b7280;
    background: #fff;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);

    .app-credit-link__logo {
      height: 13px;
    }
  }

  &--tv {
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: #6b7280;

    .app-credit-link__logo {
      height: 16px;
    }
  }
}

.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);
}
</style>