boursecu_user/src/App.vue

<template>
  <!-- Splash outside .desktopConfig so the 426px mobile frame cannot clip it -->
  <div
    v-if="showSplash"
    class="app-splash-screen flex justify-center"
    :style="{ backgroundColor: getProjectSplashBackground() }"
  >
    <div class="self-center splash_appear_fade_in">
      <img
        :src="getProjectSplashLogo(config?.config?.avatar)"
        class="w-[min(72vw,280px)] h-auto object-contain"
        alt=""
      >
    </div>
  </div>

  <div class="desktopConfig w-full right-0 left-0">
    <div v-if="popVisible" class="top-0 bottom-0 wrap-fix bg-primary z-100 opacity-60">
      <div class="absolute right-0 left-0 bottom-10vh flex flex-col items-center">
        <div>
          <BasicButton>درباره ما</BasicButton>
        </div>
        <div></div>
        <div></div>
      </div>
    </div>
    <AConfigProvider :theme="antTheme ?? undefined" direction="rtl">
      <div v-if="!showSplash" class="app-main">
        <router-view v-slot="{ Component, route }">
          <component :is="Component" :key="route.fullPath" />
        </router-view>
      </div>
      <RequiredKycModal v-if="!showSplash && !isTvBoardRoute && !isLoginRoute" />
    </AConfigProvider>
    <div
      v-if="showGiftCardButton"
      id="gift-card-button"
      class="fixed z-[5095] cursor-grab select-none rounded-full"
      :class="{ 'cursor-grabbing': giftCardDragging }"
      :style="giftCardButtonStyle"
      title="ثبت کارت هدیه"
      @pointerdown="onGiftCardPointerDown"
      @pointermove="onGiftCardPointerMove"
      @pointerup="handleGiftCardPointerUp"
      @pointercancel="onGiftCardPointerCancel"
    >
      <div
        class="relative inline-flex items-center gap-2 rounded-full bg-white border border-solid border-gray-200 shadow-[0_6px_20px_rgba(15,23,42,0.14)] px-3.5 py-[9px] text-slate-800 text-[13px] font-600 leading-none transition-all duration-200"
        :class="{ 'shadow-[0_10px_28px_rgba(15,23,42,0.22)]': giftCardDragging }"
      >
        <BasicIcon
          icon="vuesax-linear:gift"
          size="18"
          :color="giftCardFabAccent"
          class="shrink-0"
        />
        <span class="whitespace-nowrap">ثبت کارت هدیه</span>
      </div>
    </div>
    <div
      v-if="showSupportButton && !showSplash && route.name !== 'support' && route.name !== 'login' && !isTvBoardRoute && !isKycRequired"
      id="support-button"
      ref="supportButtonEl"
      class="fixed z-[5100] cursor-grab select-none rounded-full"
      :class="{
        'cursor-grabbing': supportDragging,
        'z-[var(--app-z-support-fab-open,5615)]': supportPickerOpen,
      }"
      :style="supportButtonStyle"
      title="پشتیبانی"
      @pointerdown="onSupportPointerDown"
      @pointermove="onSupportPointerMove"
      @pointerup="handleSupportPointerUp"
      @pointercancel="onSupportPointerCancel"
    >
      <div
        class="relative inline-flex items-center gap-2 rounded-full bg-white border border-solid border-gray-200 shadow-[0_6px_20px_rgba(15,23,42,0.14)] px-3.5 py-[9px] text-slate-800 text-[13px] font-600 leading-none transition-all duration-200"
        :class="{
          'shadow-[0_10px_28px_rgba(15,23,42,0.22)]': supportDragging,
          'scale-[0.94] shadow-[0_4px_14px_rgba(15,23,42,0.12)]': supportPickerOpen && !supportDragging,
        }"
      >
        <BasicIcon
          :icon="supportIcon"
          size="18"
          :color="supportAccentColor"
          class="shrink-0"
        />
        <span class="whitespace-nowrap">پشتیبانی</span>
        <span
          v-if="supportChatUnreadCount > 0"
          class="support-fab-badge"
        >
          {{ supportChatUnreadCount > 99 ? '99+' : supportChatUnreadCount }}
        </span>
      </div>
    </div>
  </div>
  <div
    v-if="!showSplash && !isDesktop && !isTvBoardRoute && !isLoginRoute"
    class="app-credit-footer app-credit-footer--mobile"
    :class="{ 'app-credit-footer--login': showLoginCreditExtras }"
  >
    <EnamadBadge v-if="showLoginCreditExtras" size="sm" />
    <AppCreditLink variant="mobile" />
  </div>
  <div
    v-if="!showSplash && showDesktopFloatingCredit && !isTvBoardRoute"
    class="app-credit-footer app-credit-footer--desktop-float"
    :class="{ 'app-credit-footer--login': showLoginCreditExtras }"
  >
    <EnamadBadge v-if="showLoginCreditExtras" size="sm" />
    <AppCreditLink variant="float" />
  </div>

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

  <VersionUpdateModal />

  <PwaInstallBanner
    v-if="!showSplash && !isTvBoardRoute"
    :visible="bannerVisible && !guideOpen"
    @install="openGuide()"
    @dismiss="dismissBanner()"
  />

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

  <GoldDayCalculatorModal />
</template>

<script lang="ts" setup>
import {computed, defineAsyncComponent, onMounted, ref, watch} from 'vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import {useConfigStore} from "@/store/configStore";
import {getProjectFontFamily, getProjectSplashBackground, getProjectSplashLogo, getProjectBrandRed, getProjectPrimaryColor, resetAppSurfaceBackground} from "@/utils/config";
import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
import { useApplyDesktopLayoutClass, useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
import { useSupportMessenger } from '@/composables/useSupportMessenger'
import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
import AppCreditLink from '@/components/AppCreditLink.vue'
import EnamadBadge from '@/components/EnamadBadge.vue'
import SupportMessengerPicker from '@/components/SupportMessengerPicker.vue'
import { useRoute, useRouter } from 'vue-router'
import { recoverMobileViewportAfterAuth } from '@/layouts/composables/useMobileScrollReset'
import { usePwaInstall } from '@/composables/usePwaInstall'
import PwaInstallBanner from '@/components/pwa/PwaInstallBanner.vue'
import PwaInstallGuideModal from '@/components/pwa/PwaInstallGuideModal.vue'
import GoldDayCalculatorModal from '@/components/GoldDayCalculatorModal.vue'
import RequiredKycModal from '@/components/RequiredKycModal.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 { isCustomerIdentityVerified } from '@/utils/customerIdentity'
import { message } from 'ant-design-vue'
import { showBrowserNotification } from '@/utils/browserNotification'

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

useApplyDesktopLayoutClass()

const isDesktop = useDesktopBreakpoint()
const route = useRoute()
const router = useRouter()
const showDesktopFloatingCredit = computed(() => {
  if (!isDesktop.value) return false
  // پشتیبانی خودش سایدبار دارد؛ float روی دکمه ارسال می‌افتد
  if (route.name === 'support') return false
  if (route.name === 'login') return false
  return !!route.meta.hideMenu
})
const isLoginRoute = computed(() => route.name === 'login')

const config = useConfigStore()

function isTvBoardPath() {
  const path = window.location.pathname.replace(/\/+$/, '')
  return path.endsWith('/tv') || path.endsWith('/monitor')
}

const showSplash = ref(!isTvBoardPath())
const isTvBoardRoute = computed(
  () => route.name === 'tvMonitor' || route.meta.hideChrome === true || isTvBoardPath(),
)
const popVisible = ref(false)

const {
  guideOpen,
  bannerVisible,
  platform,
  openGuide,
  dismissBanner,
  completeGuide,
  showBanner,
} = 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(() => {
  const accent = messengerMeta.value.accent
  if (accent !== '#334155') return accent
  return config.config?.color || accent
})

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

function openSupportLink() {
  void openSupportMessenger(supportButtonEl.value)
}

function handleSupportPointerUp(event: PointerEvent) {
  const clicked = supportPointerUp(event)
  if (!clicked) return
  event.stopPropagation()
  openSupportLink()
}

const antTheme = computed(() => {
  const primaryColor = getProjectPrimaryColor()
  if (!primaryColor) return null

  const brandRed = getProjectBrandRed()

  return {
    token: {
      colorPrimary: primaryColor,
      colorLink: primaryColor,
      colorLinkActive: primaryColor,
      colorLinkHover: primaryColor,
      fontFamily: getProjectFontFamily(),
      ...(brandRed ? {
        colorError: brandRed,
        colorErrorHover: brandRed,
        colorErrorActive: brandRed,
        colorErrorBg: '#f8ecec',
        colorErrorBorder: '#f0d8d8',
      } : {}),
    },
  }
})

onMounted(async () => {
  await config.getConfigData()
  await loadSupportMessengerFromSettings()
  console.log(config?.config?.color)
  setTimeout(() => {
    showSplash.value = false
  }, 2000)
})

watch(
  showSplash,
  (visible) => {
    if (visible) {
      const splashBg = getProjectSplashBackground()
      document.documentElement.style.backgroundColor = splashBg
      document.body.style.backgroundColor = splashBg
      return
    }
    resetAppSurfaceBackground()
    void import('@/utils/safeAreaInsets').then(({ syncSafeAreaInsets }) => {
      syncSafeAreaInsets()
    })
    showBanner()
  },
  { immediate: true },
)

watch(
  () => route.name,
  (toName, fromName) => {
    if (isDesktop.value) return
    if (fromName === 'login' || toName === 'home') {
      recoverMobileViewportAfterAuth()
    }
  },
  { flush: 'post' },
)

const userStore = useUserStore()
const settingsStore = useSettingsStore()
const isKycRequired = computed(
  () =>
    Boolean(getToken()) &&
    Boolean(userStore.userInfo) &&
    !isCustomerIdentityVerified(userStore.userInfo?.is_legal),
)

const giftCardFabAccent = computed(
  () => config.config?.color || getProjectPrimaryColor() || '#334155',
)

const showGiftCardButton = computed(() => {
  if (showSplash.value) return false
  if (isTvBoardRoute.value || isLoginRoute.value || isKycRequired.value) return false
  if (route.name === 'giftCard') return false
  if (!getToken()) return false
  return settingsStore.isSettingTruthy('has_page_gift_card')
})

const {
  dragging: giftCardDragging,
  fabStyle: giftCardButtonStyle,
  handlePointerDown: onGiftCardPointerDown,
  handlePointerMove: onGiftCardPointerMove,
  handlePointerUp: giftCardPointerUp,
  handlePointerCancel: onGiftCardPointerCancel,
} = useDraggableFloatingButton('boursecu_gift_card_button_position_v1', {
  width: 148,
  height: 42,
  defaultBottomGap: 62,
  defaultRightOffset: 16,
})

function handleGiftCardPointerUp(event: PointerEvent) {
  const clicked = giftCardPointerUp(event)
  if (!clicked) return
  event.stopPropagation()
  void router.push({ name: 'giftCard' })
}

const showLoginCreditExtras = computed(() => {
  if (!isLoginRoute.value) return false
  const href = String(settingsStore.getSettingByKey('enamad_url') ?? '').trim()
  const src = String(settingsStore.getSettingByKey('enamad_logo') ?? '').trim()
  return Boolean(href && src)
})
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

  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">
/* ارتفاع نوار اعتبار + safe-area؛ منوی پایین با bottom: var(--app-credit-footer-offset) بالاتر از این نوار می‌نشیند */
:root {
  --app-credit-bar-inner: 28px;
  /* constant برای iOS قدیمی؛ env باید مستقیم هم در مصرف‌کننده‌ها تکرار شود */
  --app-safe-top: 0px;
  --app-safe-top: constant(safe-area-inset-top);
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: 0px;
  --app-safe-bottom: constant(safe-area-inset-bottom);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-home-header-offset: calc(4.25rem + var(--app-safe-top));
  --app-credit-footer-offset: calc(var(--app-credit-bar-inner) + var(--app-safe-bottom));
  --app-nav-height: 80px;
  --app-bottom-chrome-height: calc(var(--app-nav-height) + var(--app-credit-footer-offset));
  --app-desktop-sidebar-width: 260px;
  --app-add-card-height: 88px;
  /* بخشی از کارت کیف‌پول زیر نوار «افزودن کارت جدید» دیده می‌شود */
  --wallet-card-dock-overlap: 52px;
  --app-z-nav: 5000;
  --app-z-toast: 5050;
  --app-z-wallet-dock: 4490;
  --app-z-wallet-add-bar: 4510;
  --app-z-action-sheet: 5200;
  --app-z-dialog: 5300;
  /* زیر لایه دراپ‌داون اینت (99999) تا تقویم/سلکت داخل مدال روی آن باز شود */
  --app-z-modal: 5500;
  --app-z-support-picker: 5600;
  --app-z-support-fab-open: 5615;
}

/* نوار اعلان Ant — پیش‌فرض z-index:1010 زیر هدر fixed می‌رود */
.ant-notification {
  z-index: var(--app-z-toast, 5050) !important;
}

.app-main {
  width: 100%;
  min-height: 100vh;
  opacity: 1 !important;
}

.desktopConfig {
  min-height: 100vh;
}

.app-credit-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000000;
  box-sizing: content-box;
}

/* toast اعلان‌های اپ باید بالای نوار اعتبار باشد */
.ant-notification .app-notif-toast,
.app-notif-toast {
  z-index: 1000001 !important;
}

.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 3.75px 16px 0 rgba(0, 0, 0, 0.43);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: #000;
}

.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;
    color: inherit;
  }

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

  &__logo {
    width: auto;
    height: 12px;
    object-fit: contain;
    display: block;
  }

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

    .app-credit-link__text {
      color: #000;
    }

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

  &--sidebar {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 4px 4px;
    color: #9ca3af;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    box-sizing: border-box;

    .app-credit-link__text {
      white-space: nowrap;
      flex-shrink: 0;
    }

    .app-credit-link__logo {
      height: 15px;
      max-width: 68px;
      flex-shrink: 0;
      opacity: 0.9;
    }
  }

  &--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;
    }
  }
}

html.project-boursecu {
  .app-credit-link--sidebar {
    color: rgba(255, 255, 255, 0.55);

    .app-credit-link__logo {
      filter: brightness(1.2);
      opacity: 0.85;
    }

    &:hover {
      color: rgba(255, 255, 255, 0.85);
    }
  }

  .app-credit-link--float {
    background: var(--App-brand-nav, #133050);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
  }
}

.updateButton .van-dialog__confirm .van-button__text {
  color: @App-primary-color !important;
  font-weight: 600;
  font-size: 15px;
}

#support-button {
  /* جای draggable از fabStyle می‌آید */
}

.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;
}

@media screen and (min-width: 426px) and (max-width: 767.98px) {
  html:not(.app-layout--desktop) .desktopConfig {
    width: 426px;
    position: relative !important;
  }
}

html.app-layout--desktop {
  #support-button,
  #gift-card-button {
    bottom: 12px;
    right: calc(var(--app-desktop-sidebar-width, 260px) + 20px);
  }
}
</style>