hereconnect/apps/frontend/src/components/create/CreateMessageDeliveryMethodSection.vue

<template>
  <section>
    <h2 class="text-xl font-semibold mb-4">Куда отправлять сообщения?</h2>
    <p class="text-gray-600 mb-4">Выберите, как вы хотите получать сообщения.</p>
    <div class="flex flex-col gap-3 mb-4">
      <div class="flex items-center gap-2" v-for="option in deliveryOptions" :key="option.method">
        <RadioButton
          v-model="model"
          :inputId="option.method"
          name="delivery"
          :value="option.method"
          @change="handleSelection(option.method)"
        />
        <label :for="option.method">{{ option.label }}</label>
      </div>
    </div>

    <!-- Сообщение о недоступности -->
    <p v-if="telegramNotice" class="text-red-500 mb-2">
      Отправка в Telegram пока в разработке.<br />
      Этот способ отправки сообщений можно будет выбрать позже.
    </p>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type QRCodeDocument } from '@/types/DBDocumentTypes'
import { deliveryOptions } from '@/constants/deliveryOptions'

const emit = defineEmits(['nextStep'])
const model = defineModel<QRCodeDocument['messageDeliveryMethod']>()

// Локальное состояние для уведомления
const telegramNotice = ref(false)

// Обработчик выбора
function handleSelection(method: QRCodeDocument['messageDeliveryMethod']) {
  if (method === 'telegram') {
    telegramNotice.value = true
  } else {
    telegramNotice.value = false
    emit('nextStep')
  }
}
</script>