fix: handle different states of notification permissions

czabaj · Dec 22, 2024 · 241c3f9 · 241c3f9
1 parent 2e0a5ca
commit 241c3f9
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 56 deletions.
diff --git a/src/backend/NotificationHooks.res b/src/backend/NotificationHooks.res
@@ -1,7 +1,8 @@
 let isMobileIOs: bool = %raw(`navigator.userAgent.match(/(iPhone|iPad)/)`)
 let canSubscribe =
-  // on iOS the notifications are only allowed in standalone mode
-  !isMobileIOs || %raw(`window.navigator.standalone === true`)
+  %raw(`"Notification" in window`) &&
+  (// on iOS the notifications are only allowed in standalone mode
+  !isMobileIOs || %raw(`window.navigator.standalone === true`))
 
 @genType
 type notificationEventMessages =
@@ -11,6 +12,9 @@ type notificationEventMessages =
 @genType
 type updateDeviceTokenMessage = {deviceToken: string}
 
+@val @scope(("window", "Notification"))
+external notificationPermission: [#default | #denied | #granted] = "permission"
+
 let useGetSubscibedUsers = (
   ~currentUserUid: string,
   ~event: NotificationEvents.notificationEvent,

diff --git a/src/pages/Place/NotificationDialog.module.css b/src/pages/Place/NotificationDialog.module.css
@@ -1,4 +1,5 @@
 .notificationDialog {
+  max-inline-size: 40ch;
   & fieldset {
     grid-template-columns: 1fr auto;
   }

diff --git a/src/pages/Place/NotificationDialog.res b/src/pages/Place/NotificationDialog.res
@@ -16,60 +16,74 @@ let make = (
       <h3> {React.string(`Nastavení notifikací`)} </h3>
       <p> {React.string(`Přihlaš se k odběru důležitých zpráv.`)} </p>
     </header>
-    <form>
-      <fieldset className={`reset ${Styles.fieldset.grid}`}>
-        <InputWrapper
-          inputName="free_table"
-          inputSlot={<InputToggle
-            checked={BitwiseUtils.bitAnd(
-              currentUserNotificationSubscription,
-              (NotificationEvents.FreeTable :> int),
-            ) !== 0}
-            onChange={event => {
-              let target = event->ReactEvent.Form.target
-              let checked = target["checked"]
-              onUpdateSubscription(
-                checked
-                  ? BitwiseUtils.bitOr(
-                      currentUserNotificationSubscription,
-                      (NotificationEvents.FreeTable :> int),
-                    )
-                  : BitwiseUtils.bitAnd(
-                      currentUserNotificationSubscription,
-                      BitwiseUtils.bitNot((NotificationEvents.FreeTable :> int)),
-                    ),
-              )
-            }}
-          />}
-          labelSlot={React.string("První pivo")}
-        />
-        <InputWrapper
-          inputName="fresh_keg"
-          inputSlot={<InputToggle
-            checked={BitwiseUtils.bitAnd(
-              currentUserNotificationSubscription,
-              (NotificationEvents.FreshKeg :> int),
-            ) !== 0}
-            onChange={event => {
-              let target = event->ReactEvent.Form.target
-              let checked = target["checked"]
-              onUpdateSubscription(
-                checked
-                  ? BitwiseUtils.bitOr(
-                      currentUserNotificationSubscription,
-                      (NotificationEvents.FreshKeg :> int),
-                    )
-                  : BitwiseUtils.bitAnd(
-                      currentUserNotificationSubscription,
-                      BitwiseUtils.bitNot((NotificationEvents.FreshKeg :> int)),
-                    ),
-              )
-            }}
-          />}
-          labelSlot={React.string("Čerstvý sud")}
-        />
-      </fieldset>
-    </form>
+    {switch NotificationHooks.notificationPermission {
+    | #denied =>
+      <p className={Styles.messageBar.variantDanger}>
+        {React.string(`Notifikace pro tuto aplikaci jsou zakázané, musíš je povolit v nastavení prohlížeče nebo systému.`)}
+      </p>
+    | permission =>
+      <>
+        {permission === #granted
+          ? React.null
+          : <p className={Styles.messageBar.base}>
+              {React.string(`Jakmile zapneš notifikace, bude to po tobě chtít ještě odsouhlasit povolení pro tuto aplikaci. Bez povolení notifikace nefungují.`)}
+            </p>}
+        <form>
+          <fieldset className={`reset ${Styles.fieldset.grid}`}>
+            <InputWrapper
+              inputName="free_table"
+              inputSlot={<InputToggle
+                checked={BitwiseUtils.bitAnd(
+                  currentUserNotificationSubscription,
+                  (NotificationEvents.FreeTable :> int),
+                ) !== 0}
+                onChange={event => {
+                  let target = event->ReactEvent.Form.target
+                  let checked = target["checked"]
+                  onUpdateSubscription(
+                    checked
+                      ? BitwiseUtils.bitOr(
+                          currentUserNotificationSubscription,
+                          (NotificationEvents.FreeTable :> int),
+                        )
+                      : BitwiseUtils.bitAnd(
+                          currentUserNotificationSubscription,
+                          BitwiseUtils.bitNot((NotificationEvents.FreeTable :> int)),
+                        ),
+                  )
+                }}
+              />}
+              labelSlot={React.string("První pivo")}
+            />
+            <InputWrapper
+              inputName="fresh_keg"
+              inputSlot={<InputToggle
+                checked={BitwiseUtils.bitAnd(
+                  currentUserNotificationSubscription,
+                  (NotificationEvents.FreshKeg :> int),
+                ) !== 0}
+                onChange={event => {
+                  let target = event->ReactEvent.Form.target
+                  let checked = target["checked"]
+                  onUpdateSubscription(
+                    checked
+                      ? BitwiseUtils.bitOr(
+                          currentUserNotificationSubscription,
+                          (NotificationEvents.FreshKeg :> int),
+                        )
+                      : BitwiseUtils.bitAnd(
+                          currentUserNotificationSubscription,
+                          BitwiseUtils.bitNot((NotificationEvents.FreshKeg :> int)),
+                        ),
+                  )
+                }}
+              />}
+              labelSlot={React.string("Čerstvý sud")}
+            />
+          </fieldset>
+        </form>
+      </>
+    }}
     {%raw(`import.meta.env.PROD`)
       ? React.null
       : <button className={Styles.button.base} type_="button" onClick={_ => sendTestNotification()}>