feat(web-ui): add button to enable notifcations (#924)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

Author: johanbook

services/web-ui/public/locales/en/settings.json

@@ -1,5 +1,4 @@
 {
-  "description": "These are the permanent settings you can change. More settings will be added here in the future.",
   "danger-zone": {
     "description": "These are actions that cannot be undone",
     "header": "Danger zone",
@@ -12,5 +11,14 @@
     }
   },
   "darkmode": "Darkmode",
-  "header": "Settings"
+  "header": "Settings",
+  "notifications": {
+    "header": "Notifications",
+    "enable": {
+      "description": "Enable push notifications for this device",
+      "button": "Enable",
+      "error": "Failed to enable push notifications",
+      "success": "Enabled push notifications"
+    }
+  }
 }

services/web-ui/public/locales/sv/settings.json

@@ -1,5 +1,4 @@
 {
-  "description": "Här kan du ändra dina permanenta inställningar. Detta kommer att komma mer här allteftersom.",
   "danger-zone": {
     "description": "Detta är åtgärder som inte kan ångras",
     "header": "Farozon",
@@ -12,5 +11,14 @@
     }
   },
   "darkmode": "Mörkerläge",
-  "header": "Inställningar"
+  "header": "Inställningar",
+  "notifications": {
+    "header": "Push-notiser",
+    "enable": {
+      "description": "Aktivera push-notiser på denna enhet",
+      "button": "Aktivera",
+      "error": "Ett fel uppstod vid aktivering av notiser",
+      "success": "Notiser har aktiverats"
+    }
+  }
 }

services/web-ui/src/features/settings/pages/SettingsPage/SettingsPage.container.tsx

@@ -6,6 +6,7 @@ import { useDialog } from "src/core/dialog";
 import { useTranslation } from "src/core/i18n";
 import { useMutation } from "src/core/query";
 import { useSnackbar } from "src/core/snackbar";
+import { registerServiceWorker } from "src/registerServiceWorker";
 
 import { SettingsPageNav } from "./SettingsPage.nav";
 
@@ -15,11 +16,20 @@ export function SettingsPageContainer(): ReactElement {
   const snackbar = useSnackbar();
 
   const deleteAccountMutation = useMutation({
-    onError: () => snackbar.success(t("danger-zone.delete-account.success")),
-    onSuccess: () => snackbar.error(t("danger-zone.delete-account.error")),
+    onError: () => snackbar.error(t("danger-zone.delete-account.error")),
+    onSuccess: () => snackbar.success(t("danger-zone.delete-account.success")),
     mutationFn: () => profileApi.deleteCurrentProfile(),
   });
 
+  const enableNotificationsMutation = useMutation({
+    onError: () => snackbar.error(t("notifications.enable.error")),
+    onSuccess: () => snackbar.success(t("notifications.enable.success")),
+    mutationFn: async () => {
+      await Notification.requestPermission();
+      await registerServiceWorker();
+    },
+  });
+
   function handleClickDelete() {
     openDialog(ConfirmationDialog, {
       description: t("danger-zone.delete-account.description"),
@@ -33,6 +43,23 @@ export function SettingsPageContainer(): ReactElement {
 
   return (
     <SettingsPageNav>
+      <Typography gutterBottom variant="h6">
+        {t("notifications.header")}
+      </Typography>
+
+      <Typography color="textSecondary" sx={{ pb: 2 }}>
+        {t("notifications.enable.description")}
+      </Typography>
+
+      <Button
+        color="inherit"
+        loading={enableNotificationsMutation.isPending}
+        onClick={() => enableNotificationsMutation.mutate()}
+        variant="outlined"
+      >
+        {t("notifications.enable.button")}
+      </Button>
+
       <Typography gutterBottom sx={{ paddingTop: 3 }} variant="h6">
         {t("danger-zone.header")}
       </Typography>
@@ -41,16 +68,14 @@ export function SettingsPageContainer(): ReactElement {
         {t("danger-zone.description")}
       </Typography>
 
-      <div>
-        <Button
-          color="error"
-          loading={deleteAccountMutation.isPending}
-          onClick={handleClickDelete}
-          variant="contained"
-        >
-          {t("danger-zone.delete-account.button")}
-        </Button>
-      </div>
+      <Button
+        color="error"
+        loading={deleteAccountMutation.isPending}
+        onClick={handleClickDelete}
+        variant="contained"
+      >
+        {t("danger-zone.delete-account.button")}
+      </Button>
     </SettingsPageNav>
   );
 }

services/web-ui/src/features/settings/pages/SettingsPage/SettingsPage.nav.tsx

@@ -34,11 +34,7 @@ export function SettingsPageNav({
 
   return (
     <Nav appBarContent={appBarContent}>
-      <Box sx={{ pt: 1, px: 3 }}>
-        <Typography color="textSecondary">{t("description")}</Typography>
-
-        {children}
-      </Box>
+      <Box sx={{ pt: 1, px: 3 }}>{children}</Box>
     </Nav>
   );
 }