♻️ Move disable notifications api (#1490)

Author: lukevella

apps/web/next.config.js

@@ -51,6 +51,11 @@ const nextConfig = {
         destination: "/settings/profile",
         permanent: true,
       },
+      {
+        source: "/auth/disable-notifications",
+        destination: "/api/notifications/unsubscribe",
+        permanent: true,
+      },
     ];
   },
   experimental: {

apps/web/public/locales/en/app.json

@@ -198,16 +198,12 @@
   "requireParticipantEmailLabel": "Make email address required for participants",
   "hideParticipantsLabel": "Hide participant list from other participants",
   "hideScoresLabel": "Hide scores until after a participant has voted",
-  "authErrorTitle": "Login Error",
-  "authErrorDescription": "There was an error logging you in. Please try again.",
-  "authErrorCta": "Go to login page",
   "continueAs": "Continue as",
   "pageMovedDescription": "Redirecting to <a>{newUrl}</a>",
   "notRegistered": "Don't have an account? <a>Register</a>",
   "unlockFeatures": "Unlock all Pro features.",
   "pollStatusFinalized": "Finalized",
   "share": "Share",
-  "pageXOfY": "Page {currentPage} of {pageCount}",
   "noParticipants": "No participants",
   "userId": "User ID",
   "aboutGuest": "Guest User",
@@ -281,5 +277,7 @@
   "savePercentage": "Save {percentage}%",
   "1month": "1 month",
   "subscribe": "Subscribe",
-  "cancelAnytime": "Cancel anytime from your <a>billing page</a>."
+  "cancelAnytime": "Cancel anytime from your <a>billing page</a>.",
+  "unsubscribeToastTitle": "You have disabled notifications",
+  "unsubscribeToastDescription": "You will no longer receive notifications for this poll"
 }

apps/web/src/app/[locale]/poll/[urlId]/admin-page.tsx

@@ -9,11 +9,13 @@ import { useTouchBeacon } from "@/components/poll/use-touch-beacon";
 import { VotingForm } from "@/components/poll/voting-form";
 
 import { GuestPollAlert } from "./guest-poll-alert";
+import { UnsubscribeAlert } from "./unsubscribe-alert";
 
 export function AdminPage() {
   useTouchBeacon();
   return (
     <div className="space-y-3 lg:space-y-4">
+      <UnsubscribeAlert />
       <PollHeader />
       <GuestPollAlert />
       <EventCard />

apps/web/src/app/[locale]/poll/[urlId]/unsubscribe-alert.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useToast } from "@rallly/ui/hooks/use-toast";
+import Cookies from "js-cookie";
+import { useParams } from "next/navigation";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+export function UnsubscribeAlert() {
+  const { toast } = useToast();
+  const { t } = useTranslation("app");
+
+  const urlId = useParams<{ urlId: string }>()?.urlId;
+
+  useEffect(() => {
+    if (!urlId) return;
+    const cookieName = `notifications-unsubscribed-${urlId}`;
+    const unsubscribed = Cookies.get(cookieName);
+    if (unsubscribed) {
+      Cookies.remove(cookieName);
+      toast({
+        title: t("unsubscribeToastTitle", {
+          defaultValue: "You have disabled notifications",
+        }),
+        description: t("unsubscribeToastDescription", {
+          defaultValue:
+            "You will no longer receive notifications for this poll",
+        }),
+      });
+    }
+  }, [t, toast, urlId]);
+
+  return null;
+}

apps/web/src/app/api/notifications/unsubscribe/route.ts

@@ -0,0 +1,60 @@
+import { prisma } from "@rallly/database";
+import { cookies } from "next/headers";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import { getServerSession } from "@/auth";
+import type { DisableNotificationsPayload } from "@/trpc/types";
+import { decryptToken } from "@/utils/session";
+
+export const GET = async (req: NextRequest) => {
+  const token = req.nextUrl.searchParams.get("token");
+
+  if (!token) {
+    return NextResponse.redirect(new URL("/login", req.url));
+  }
+
+  const session = await getServerSession();
+
+  if (!session || !session.user.email) {
+    return NextResponse.redirect(new URL("/login", req.url));
+  }
+
+  const payload = await decryptToken<DisableNotificationsPayload>(token);
+
+  if (!payload) {
+    return NextResponse.redirect(new URL("/login", req.url));
+  }
+
+  const watcher = await prisma.watcher.findFirst({
+    where: {
+      userId: session.user.id,
+      pollId: payload.pollId,
+    },
+  });
+
+  if (watcher) {
+    await prisma.watcher.delete({
+      where: {
+        id: watcher.id,
+      },
+      select: {
+        pollId: true,
+      },
+    });
+
+    // Set a session cookie to indicate that the user has unsubscribed
+    cookies().set(`notifications-unsubscribed-${watcher.pollId}`, "1", {
+      path: "/",
+      httpOnly: false,
+      secure: false,
+      sameSite: "lax",
+      maxAge: 5,
+    });
+
+    // redirect to poll
+    return NextResponse.redirect(new URL(`/poll/${watcher.pollId}`, req.url));
+  }
+
+  return NextResponse.redirect(new URL(`/poll/${payload.pollId}`, req.url));
+};