hereconnect/apps/frontend/src/views/ManageQRCodeChatView.vue

<template>
  <MetaHead>
    <title>Чат {{ chatDoc?.name ? `«${chatDoc.name}»` : '' }} — НаСвязи</title>
    <meta
      name="description"
      content="Ваш QR-код успешно создан! Узнайте, как его использовать и настройте все доступные функции для удобного взаимодействия с окружающими."
    />
  </MetaHead>

  <div class="flex flex-col min-h-full">
    <!-- Основной контент -->
    <main class="flex-grow flex flex-col">
      <section class="flex flex-col flex-grow max-w-prose w-full mx-auto">
        <ChatComponent userRole="owner" :qr_code_uri="qr_code_uri" :chat="chat">
          <template #endOfMessages="{ count }">
            <!-- Уведомление, если гость отправил только одно сообщение -->
            <div
              v-if="count === 2"
              class="flex flex-col items-center justify-center text-center bg-gray-50 border border-gray-200 rounded-lg shadow-md p-6 mt-6"
            >
              <p class="text-gray-700 font-medium text-lg">Ваше сообщение отправлено.</p>
              <p class="text-gray-600 mt-2">
                Вы можете написать ещё одно сообщение или подождать ответа.
              </p>
            </div>

            <p class="mt-10 text-sm text-gray-500 text-center">
              Хотите создать еще один QR‑код?
              <a href="/create" class="underline underline-offset-2">Создайте его здесь</a>.
            </p>
            <p class="mt-1 text-sm text-gray-500 text-center">
              Сделайте НаСвязи удобнее. Мы будем рады вашей&nbsp;<RouterLink
                to="/donate"
                class="underline"
                >поддержке</RouterLink
              >.
            </p>
          </template>
        </ChatComponent>
      </section>
    </main>

    <!-- Футер -->
    <!--    <footer class="bg-gray-100 text-center py-4 border-t text-sm text-gray-700">-->
    <!--      <p><a href="/create" class="underline underline-offset-2">Создайте свой QR‑код</a>.</p>-->
    <!--      <p class="mt-1">-->
    <!--        Сделайте НаСвязи удобнее. Будем рады вашей&nbsp;<a href="/donate" class="underline underline-offset-2"-->
    <!--          >поддержке</a-->
    <!--        >.-->
    <!--      </p>-->
    <!--    </footer>-->
  </div>
</template>

<script setup lang="ts">
import type { MessageDocument } from '@hereconnect/types'
import ChatComponent from '@/components/ChatComponent.vue'
import { getQrCodeDocument } from '@/api/qrCode'
import { useQuery } from '@tanstack/vue-query'

const props = defineProps<{
  qr_code_uri: MessageDocument['qr_code_uri']
  chat: MessageDocument['chat']
}>()

const { data: chatDoc } = useQuery({
  queryKey: ['qrCode', computed(() => props.qr_code_uri)],
  queryFn: () => getQrCodeDocument(props.qr_code_uri),
})
</script>