test web push

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

@@ -2,45 +2,42 @@
   <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)"
+    <CreateMessageDeliveryOptions>
+      <template #telegram="{ label, method }">
+        <CreateMessageDeliveryOptionTelegram
+          :label
+          :method
+          v-model="localModel"
+          @change="onChange"
         />
-        <label :for="option.method">{{ option.label }}</label>
-      </div>
-    </div>
-
-    <!-- Сообщение о недоступности -->
-    <p v-if="telegramNotice" class="text-red-500 mb-2">
-      Отправка в Telegram пока в разработке.<br />
-      Этот способ отправки сообщений можно будет выбрать позже.
-    </p>
+      </template>
+      <template #webPush="{ label, method }">
+        <CreateMessageDeliveryOptionWebPush
+          :label
+          :method
+          v-model="localModel"
+          @change="onChange"
+        />
+      </template>
+      <template #default="{ label, method }">
+        <CreateMessageDeliveryOption :label :method v-model="localModel" @change="onChange" />
+      </template>
+    </CreateMessageDeliveryOptions>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { type QRCodeDocument } from '@/types/DBDocumentTypes'
-import { deliveryOptions } from '@/constants/deliveryOptions'
+import CreateMessageDeliveryOptionTelegram from '@/components/create/CreateMessageDeliveryOptionTelegram.vue'
+import CreateMessageDeliveryOptionWebPush from '@/components/create/CreateMessageDeliveryOptionWebPush.vue'
+import { ref } from 'vue'
 
 const emit = defineEmits(['nextStep'])
 const model = defineModel<null | QRCodeDocument['messageDeliveryMethod']>()
+const localModel = ref<null | QRCodeDocument['messageDeliveryMethod']>()
 
-// Локальное состояние для уведомления
-const telegramNotice = ref(false)
-
-// Обработчик выбора
-function handleSelection(method: QRCodeDocument['messageDeliveryMethod']) {
-  if (method === 'telegram') {
-    telegramNotice.value = true
-  } else {
-    telegramNotice.value = false
-    emit('nextStep')
-  }
+const onChange = () => {
+  model.value = localModel.value
+  emit('nextStep')
 }
 </script>