placement instructions

apps/frontend/src/api/placementInstructions.ts

@@ -0,0 +1,9 @@
+import { publicSettingsDbRemote } from '@/api/dbs'
+import type { QRCodeDocument } from '@hereconnect/types'
+
+export const getPlacementInstructions = async (placement: QRCodeDocument['placement']) => {
+  const { value } = await publicSettingsDbRemote.get(
+    `public_settings:placement_instructions_${placement}`,
+  )
+  return value
+}

apps/frontend/src/components/manage/ManagePlacementInstructions.vue

@@ -4,10 +4,10 @@
     <div v-else-if="data" class="markdown dark:text-gray-300">
       <VueMarkdownIt :source="data" />
     </div>
-    <p v-else-if="isError" class="text-red-500 dark:text-red-400">Ошибка загрузки инструкции.</p>
-    <p v-else class="text-gray-500 dark:text-gray-400">
+    <p v-else-if="error?.name === 'not_found' || !data" class="text-gray-500 dark:text-gray-400">
       Инструкция для этого типа размещения отсутствует.
     </p>
+    <p v-else-if="isError" class="text-red-500 dark:text-red-400">Ошибка загрузки инструкции.</p>
   </div>
 </template>
 
@@ -16,23 +16,18 @@ import { computed } from 'vue'
 import { VueMarkdownIt } from '@f3ve/vue-markdown-it'
 import { useQuery } from '@tanstack/vue-query'
 import { type QRCodeDocument } from '@hereconnect/types'
+import { getPlacementInstructions } from '@/api/placementInstructions'
 
-// Импортируем все инструкции из директории
-const importInstructions = import.meta.glob('/src/content/placementInstructions/*.md', {
-  query: '?raw',
-  import: 'default',
-}) as unknown as Record<string, () => Promise<string>>
-
-const { placement } = defineProps<{ placement: QRCodeDocument['placement'] }>()
+const props = defineProps<{ placement: QRCodeDocument['placement'] }>()
 
 // Хук для загрузки инструкции
 async function fetchInstructions(): Promise<string | undefined> {
-  return importInstructions[`/src/content/placementInstructions/${placement}.md`]?.()
+  return getPlacementInstructions(props.placement)
 }
 
 // Используем vue-query для управления запросом
-const { isLoading, isError, data } = useQuery({
-  queryKey: ['placementInstructions', computed(() => placement)],
+const { isLoading, isError, error, data } = useQuery({
+  queryKey: ['placementInstructions', computed(() => props.placement)],
   queryFn: fetchInstructions,
 })
 </script>

apps/frontend/src/content/placementInstructions/car.md

@@ -1,22 +0,0 @@
-### Инструкции по размещению на автомобиль:
-
-**Где размещать:**
-- На боковом или заднем стекле автомобиля.
-
-**Как разместить:**
-1. Найдите видимое место на стекле, которое будет хорошо видно прохожим, например, в углу заднего или бокового окна.
-2. Очистите поверхность стекла от пыли и грязи с помощью сухой или слегка влажной ткани.
-3. Если вы используете наклейку:
-    - Убедитесь, что материал устойчив к влаге и выцветанию.
-    - Аккуратно приклейте наклейку на стекло, разглаживая её от центра к краям, чтобы избежать появления пузырьков воздуха.
-4. Если вы используете пластину или рамку:
-    - Проверьте, что крепление не повредит стекло.
-    - Убедитесь, что QR-код надёжно зафиксирован и не шатается.
-5. Если QR-код нанесён с помощью трафарета или гравировки:
-    - Проверьте, что код выполнен без дефектов и легко сканируется.
-    - Очистите стекло от остатков краски или мусора.
-
-**Важно:**
-- Убедитесь, что QR-код не блокирует обзор водителю.
-- Проверьте, что код можно легко сканировать снаружи автомобиля в любое время суток.
-- Если QR-код размещён внутри, убедитесь, что стекло чистое и не бликует.

apps/frontend/src/content/placementInstructions/door.md

@@ -1,14 +0,0 @@
-### Инструкции по размещению на входную дверь дома или квартиры:
-**Где размещать:**
-- На входной двери или рядом с домофоном.
-- На двери или рядом с дверным звонком.
-
-**Как разместить:**
-1. Найдите место рядом с дверным звонком или на самой двери, которое будет заметно для гостей.
-2. Очистите поверхность от пыли и грязи, чтобы QR-код держался крепче.
-3. Приклейте QR-код на дверь с помощью двустороннего скотча или водостойкого клея.
-4. Если вы не хотите приклеивать код, используйте рамку или подставку и разместите её на полке или возле двери.
-
-**Важно:**
-- Проверьте, что QR-код не блокирует другие элементы двери.
-- Убедитесь, что его легко заметить и сканировать при любом освещении.

apps/frontend/src/content/placementInstructions/other.md

@@ -1,12 +0,0 @@
-### Инструкции по размещению:
-**Где размещать:**
-- В зависимости от ситуации, на любом удобном и видимом месте.
-
-**Как разместить:**
-1. Подберите место, где QR-код будет защищён от повреждений и виден окружающим.
-2. Используйте подходящие материалы для крепления: двусторонний скотч, рамку, подставку или брелок.
-3. Убедитесь, что QR-код хорошо заметен и его легко сканировать.
-
-**Важно:**
-- Адаптируйте место размещения под конкретную задачу.
-- Проверьте, чтобы QR-код не был скрыт другими предметами.

apps/frontend/src/content/placementInstructions/pet.md

@@ -1,13 +0,0 @@
-### Инструкции по размещению на питомца:
-**Где размещать:**
-- На ошейнике питомца.
-
-**Как разместить:**
-1. Выберите удобный ошейник с креплением для QR-кода. Лучше всего подойдут ошейники с кольцом или специальным держателем.
-2. Используйте прочный и водостойкий брелок или пластиковую подложку для QR-кода.
-3. Закрепите QR-код на ошейнике так, чтобы он не мешал вашему питомцу, но был легко доступен для сканирования.
-4. Проверьте, чтобы QR-код был хорошо зафиксирован и не потерялся во время прогулки.
-
-**Важно:**
-- Используйте материалы, которые не вызовут аллергии или раздражения у питомца.
-- Проверьте, что QR-код можно легко сканировать в любом положении.

apps/frontend/src/content/placementInstructions/restaurant_table.md

@@ -1,18 +0,0 @@
-### Инструкции по размещению на стол в кафе или ресторане:
-**Где размещать:**
-- На столе, в меню или на подставке.
-
-**Как разместить:**
-1. Если QR-код размещается на столе:
-    - Используйте небольшой деревянный держатель или подставку.
-    - Поставьте подставку в центр стола или сбоку, чтобы гости могли легко заметить код.
-2. Если QR-код размещается в меню:
-    - Вставьте QR-код на видное место, например, на первую или последнюю страницу меню.
-    - Используйте плотный ламинированный материал, чтобы код не повредился при использовании меню.
-3. Если QR-код размещается на подставке:
-    - Поставьте подставку на уровне глаз сидящих гостей.
-    - Проверьте, чтобы подставка была устойчива и не падала.
-
-**Важно:**
-- Защищайте QR-код от влаги, например, от пролитых напитков.
-- Проверьте, что его можно легко сканировать, сидя за столом.

apps/frontend/src/content/placementInstructions/store.md

@@ -1,21 +0,0 @@
-### Инструкции по размещению в магазине
-
-**Где размещать:**
-- На витрине, входной двери, кассе или информационной стойке.
-
-**Как разместить:**
-1. **Если QR-код размещается на витрине или входной двери:**
-    - Найдите видное место на стекле, чтобы QR-код был хорошо заметен прохожим.
-    - Очистите стекло от пыли и загрязнений.
-    - Приклейте QR-код на внутреннюю сторону стекла, чтобы защитить его от погодных условий.
-2. **Если QR-код размещается на кассе:**
-    - Используйте подставку или рамку, чтобы QR-код был на уровне глаз клиента.
-    - Убедитесь, что он не мешает работе кассира.
-3. **Если QR-код размещается на информационной стойке:**
-    - Прикрепите QR-код к стойке с помощью двустороннего скотча.
-    - Либо используйте рамку, чтобы код выглядел аккуратно и профессионально.
-
-**Важно:**
-- Убедитесь, что QR-код можно легко сканировать, даже при ярком свете или бликах.
-- Если QR-код находится на улице, используйте стойкие к погодным условиям материалы.
-- Разместите код так, чтобы он не мешал и не мог быть случайно повреждён.

services/tg-bot/src/bot/conversations/newQRCodeConversation.ts

@@ -12,6 +12,7 @@ import { generateQRCodeImage } from "../../services/qrGenerator";
 import { selectMultipleActions } from "./selectMultipleActions";
 import { defaultMessages } from "@hereconnect/constants";
 import { selectPredefinedMessages } from "./selectPredefinedMessages";
+import { publicSettingsDb } from "../../dbs";
 
 export async function newQRCodeConversation(
   conversation: Conversation<MyContext>,
@@ -134,8 +135,16 @@ export async function newQRCodeConversation(
     new InputFile(new Uint8Array(pngBuffer.buffer), "qr.png"),
   );
 
+  const { value: instruction } = await publicSettingsDb
+    .get(`public_settings:placement_instructions_${typedPlacement}`)
+    .catch((error) => {
+      console.error(error);
+      return { value: "Разместите этот код на вашем объекте." };
+    });
+
   await ctx.reply(
-    `Разместите этот код на вашем объекте. При сканировании по адресу ${url} посетители смогут взаимодействовать с вами.`,
+    `${instruction}\n\nПри сканировании по адресу ${url} посетители смогут взаимодействовать с вами.`.trim(),
+    { parse_mode: "Markdown" },
   );
 
   // Завершаем разговор