From 5bf7946c34c41b145fca2f50d38804cd45cd81ff Mon Sep 17 00:00:00 2001
From: Vasilii Mikhailovskii <ti.webdev@ya.ru>
Date: Wed, 27 Nov 2024 11:02:29 +0200
Subject: [PATCH] add iOS instructions

---
 .../frontend/src/assets/icons/apple-share.svg |  1 +
 .../src/assets/icons/apple-system-plus.svg    |  1 +
 .../CreateMessageDeliveryOptionWebPush.vue    | 57 +++++++++++++++++--
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 apps/frontend/src/assets/icons/apple-share.svg
 create mode 100644 apps/frontend/src/assets/icons/apple-system-plus.svg

diff --git a/apps/frontend/src/assets/icons/apple-share.svg b/apps/frontend/src/assets/icons/apple-share.svg
new file mode 100644
index 0000000..e764db1
--- /dev/null
+++ b/apps/frontend/src/assets/icons/apple-share.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M30.3 13.7 25 8.4l-5.3 5.3-1.4-1.4L25 5.6l6.7 6.7z"/><path d="M24 7h2v21h-2z"/><path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z"/></svg>
\ No newline at end of file
diff --git a/apps/frontend/src/assets/icons/apple-system-plus.svg b/apps/frontend/src/assets/icons/apple-system-plus.svg
new file mode 100644
index 0000000..c02c5c4
--- /dev/null
+++ b/apps/frontend/src/assets/icons/apple-system-plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73"><path d="M12.727 72.39h46.24c4.167 0 7.284-1.025 9.35-3.076 2.068-2.05 3.101-5.126 3.101-9.228V13.504c0-4.102-1.033-7.178-3.1-9.229C66.25 2.225 63.134 1.2 58.967 1.2h-46.24C8.593 1.2 5.484 2.225 3.4 4.275 1.317 6.326.276 9.402.276 13.504v46.582c0 4.102 1.041 7.178 3.125 9.228 2.083 2.051 5.192 3.077 9.326 3.077Zm.097-7.08c-1.757 0-3.116-.463-4.077-1.391-.96-.928-1.44-2.32-1.44-4.175V13.846c0-1.823.48-3.207 1.44-4.15.96-.945 2.32-1.417 4.077-1.417H58.87c1.758 0 3.117.472 4.078 1.416.96.944 1.44 2.328 1.44 4.15v45.9c0 1.855-.48 3.246-1.44 4.174-.96.928-2.32 1.392-4.078 1.392Zm5.079-28.564c0 1.074.341 1.945 1.025 2.612.684.668 1.595 1.001 2.734 1.001H32.21v10.596c0 1.074.326 1.961.977 2.661.65.7 1.53 1.05 2.637 1.05 1.074 0 1.96-.35 2.66-1.05.7-.7 1.05-1.587 1.05-2.66V40.358H50.08c1.107 0 2.002-.333 2.686-1 .683-.668 1.025-1.539 1.025-2.613 0-1.107-.342-2.002-1.025-2.685-.684-.684-1.579-1.026-2.686-1.026H39.533V22.488c0-1.107-.35-2.01-1.05-2.71-.7-.7-1.586-1.05-2.66-1.05-1.107 0-1.986.35-2.637 1.05-.651.7-.977 1.603-.977 2.71v10.547H21.662c-1.139 0-2.05.342-2.734 1.026-.684.683-1.025 1.578-1.025 2.685Z"/></svg>
\ No newline at end of file
diff --git a/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue b/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
index 8dc6ae8..b32d591 100644
--- a/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
+++ b/apps/frontend/src/components/create/CreateMessageDeliveryOptionWebPush.vue
@@ -1,8 +1,41 @@
 <template>
   <CreateMessageDeliveryOption :isLoading :label :method v-model="model" />
 
+  <!-- Инструкции для iOS -->
+  <div
+    v-if="showRequireStandaloneInstructionsForIOS"
+    class="bg-yellow-100 text-yellow-800 p-4 rounded my-4"
+  >
+    <p class="mb-2">Чтобы включить уведомления, добавьте это приложение на главный экран:</p>
+    <ul class="list-disc pl-5">
+      <li class="mb-1">
+        Нажмите
+        <strong class="font-semibold">
+          "<img
+            src="@/assets/icons/apple-share.svg?url"
+            alt="Поделиться"
+            class="h-7 -mt-2 inline-block"
+          />"
+        </strong>
+        внизу экрана
+      </li>
+      <li class="mb-1">
+        Выберите
+        <strong class="inline-flex items-baseline font-semibold">
+          <span class="me-1">"На экран «Домой»</span>
+          <img
+            src="@/assets/icons/apple-system-plus.svg?url"
+            alt=""
+            class="h-4 inline-block self-center"
+          />"
+        </strong>
+      </li>
+      <li>Откройте приложение с главного экрана и повторите попытку.</li>
+    </ul>
+  </div>
+
   <!-- Ошибка разрешений -->
-  <p v-if="isError && model === method" class="text-red-500 mb-2">
+  <p v-else-if="isError && model === method" class="text-red-500 mb-2">
     {{ error }}.<br />
     <button @click="retry()" class="text-blue-500 underline">Повторить</button>
   </p>
@@ -13,12 +46,17 @@ import { type QRCodeDocument } from '@/types/DBDocumentTypes'
 import { type DeliveryOption, DELIVERY_METHOD_WEB_PUSH } from '@/constants/deliveryOptions'
 import { computed } from 'vue'
 import { useQuery } from '@tanstack/vue-query'
-
 import { getVapidPublicKey, saveWebPushSubscription } from '@/api/webPush'
 
-type DeliveryOptionWebPush = Extract<DeliveryOption, { method: typeof DELIVERY_METHOD_WEB_PUSH }>
+// Проверки iOS и запуска из главного экрана
+const isIOS = computed(
+  () => /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window && window.MSStream),
+)
+const isStandalone = computed(() => 'standalone' in window.navigator && window.navigator.standalone)
 
-defineProps<{
+// Пропсы
+type DeliveryOptionWebPush = Extract<DeliveryOption, { method: typeof DELIVERY_METHOD_WEB_PUSH }>
+const props = defineProps<{
   label: DeliveryOptionWebPush['label']
   method: DeliveryOptionWebPush['method']
 }>()
@@ -32,7 +70,11 @@ const model = defineModel<null | QRCodeDocument['messageDeliveryMethod']>()
 // Функция запроса разрешений и подписки
 async function requestNotificationPermission() {
   if (!('Notification' in window)) {
-    throw new Error('Уведомления не поддерживаются этим браузером.')
+    throw new Error(
+      isIOS.value && !isStandalone.value
+        ? 'Добавьте приложение на главный экран, чтобы использовать уведомления.'
+        : 'Уведомления не поддерживаются этим браузером.',
+    )
   }
 
   try {
@@ -59,6 +101,7 @@ async function requestNotificationPermission() {
   }
 }
 
+// Хуки для состояния запроса
 const {
   isLoading,
   isError,
@@ -70,4 +113,8 @@ const {
   queryFn: () => requestNotificationPermission(),
   retry: false,
 })
+
+const showRequireStandaloneInstructionsForIOS = computed(
+  () => isError.value && isIOS.value && !isStandalone.value && model.value === props.method,
+)
 </script>