1405/04/27

-

src/components/SupportContactBar.vue

@@ -0,0 +1,89 @@
+<template>
+  <div :class="variant === 'desktop' ? desktopRootClass : mobileRootClass">
+    <button
+      ref="triggerEl"
+      type="button"
+      class="support-contact-bar__btn"
+      :disabled="!canContactSupport"
+      @click="onSupportClick"
+    >
+      <BasicIcon icon="vuesax-linear:messages-2" size="20" color="#fff" />
+      <span>ارتباط با پشتیبانی</span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useSupportMessenger } from '@/composables/useSupportMessenger'
+import { computed, ref } from 'vue'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+    mobileRootClass?: string
+    desktopRootClass?: string
+  }>(),
+  {
+    variant: 'mobile',
+    mobileRootClass: 'wrap-fix bottom-0 px-10 pb-3rem flex bg-white',
+    desktopRootClass: 'dpage-support',
+  },
+)
+
+const {
+  supportPhoneLink,
+  hasMessengerLink,
+  hasSupportPhoneLink,
+  openSupportMessenger,
+} = useSupportMessenger()
+
+const triggerEl = ref<HTMLElement | null>(null)
+
+const canContactSupport = computed(() => hasMessengerLink.value || hasSupportPhoneLink.value)
+
+async function onSupportClick() {
+  // همان رفتار دکمه شناور پشتیبانی — بدون پیش‌نویس واریز
+  if (hasMessengerLink.value) {
+    await openSupportMessenger(triggerEl.value)
+    return
+  }
+
+  if (hasSupportPhoneLink.value && supportPhoneLink.value) {
+    window.location.href = supportPhoneLink.value
+  }
+}
+</script>
+
+<style scoped lang="less">
+.support-contact-bar__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 1rem;
+  border: 0;
+  border-radius: 0.75rem;
+  background: var(--App-primary, var(--ant-color-primary, #7f1d1d));
+  color: #fff;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.dpage-support {
+  width: 100%;
+}
+</style>

src/components/SupportMessengerBrandIcon.vue

@@ -21,8 +21,10 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import baleLogo from '@/assets/messengers/bale.png'
+import callLogo from '@/assets/messengers/call.svg'
 import eitaaLogo from '@/assets/messengers/eitaa.png'
 import rubikaLogo from '@/assets/messengers/rubika.png'
+import smsLogo from '@/assets/messengers/sms.svg'
 import soroushLogo from '@/assets/messengers/soroush.svg'
 import telegramLogo from '@/assets/messengers/telegram.svg'
 import whatsappLogo from '@/assets/messengers/whatsapp.svg'
@@ -34,6 +36,8 @@ const LOGOS: Record<string, string> = {
   rubika: rubikaLogo,
   eitaa: eitaaLogo,
   soroush: soroushLogo,
+  call: callLogo,
+  sms: smsLogo,
 }
 
 const props = defineProps<{ messenger: string }>()