✨ Skip user details step for logged in users (#602)

apps/web/src/components/poll/notifications-toggle.tsx

@@ -1,95 +1,73 @@
-import { Trans, useTranslation } from "next-i18next";
+import { useTranslation } from "next-i18next";
 import * as React from "react";
 
+import { useLoginModal } from "@/components/auth/login-modal";
 import { Button } from "@/components/button";
 import Bell from "@/components/icons/bell.svg";
 import BellCrossed from "@/components/icons/bell-crossed.svg";
+import { useUser } from "@/components/user-provider";
+import { usePostHog } from "@/utils/posthog";
 import { trpc } from "@/utils/trpc";
+import { usePollByAdmin } from "@/utils/trpc/hooks";
 
 import { usePoll } from "../poll-context";
 import Tooltip from "../tooltip";
-import { useUpdatePollMutation } from "./mutations";
-
-const Email = (props: { children?: React.ReactNode }) => {
-  return (
-    <span className="text-primary-300 whitespace-nowrap font-mono font-medium">
-      {props.children}
-    </span>
-  );
-};
 
 const NotificationsToggle: React.FunctionComponent = () => {
-  const { poll, urlId } = usePoll();
+  const { poll } = usePoll();
   const { t } = useTranslation("app");
-  const [isUpdatingNotifications, setIsUpdatingNotifications] =
-    React.useState(false);
 
-  const { mutate: updatePollMutation } = useUpdatePollMutation();
-  const requestEnableNotifications =
-    trpc.polls.enableNotifications.useMutation();
+  const { data } = usePollByAdmin();
+  const watchers = data.watchers ?? [];
+
+  const { user } = useUser();
+  const isWatching = watchers.some(({ userId }) => userId === user.id);
+
+  const posthog = usePostHog();
+
+  const watch = trpc.polls.watch.useMutation({
+    onSuccess: () => {
+      posthog?.capture("turned notifications on");
+    },
+  });
+
+  const unwatch = trpc.polls.unwatch.useMutation({
+    onSuccess: () => {
+      posthog?.capture("turned notifications off");
+    },
+  });
+
+  const isUpdating = watch.isLoading || unwatch.isLoading;
+  const { openLoginModal } = useLoginModal();
 
   return (
     <Tooltip
       content={
         <div className="max-w-md">
-          {requestEnableNotifications.isSuccess ? (
-            <Trans
-              t={t}
-              i18nKey="unverifiedMessage"
-              values={{
-                email: poll.user.email,
-              }}
-              components={{ b: <Email /> }}
-            />
-          ) : poll.notifications ? (
-            <div>
-              <div className="text-primary-300 font-medium">
-                {t("notificationsOn")}
-              </div>
-              <div className="max-w-sm">
-                <Trans
-                  t={t}
-                  i18nKey="notificationsOnDescription"
-                  values={{
-                    email: poll.user.email,
-                  }}
-                  components={{
-                    b: <Email />,
-                  }}
-                />
-              </div>
-            </div>
-          ) : (
-            t("notificationsOff")
-          )}
+          {user.isGuest
+            ? t("notificationsGuest")
+            : isWatching
+            ? t("notificationsOn")
+            : t("notificationsOff")}
         </div>
       }
     >
       <Button
         data-testid="notifications-toggle"
-        loading={
-          isUpdatingNotifications || requestEnableNotifications.isLoading
-        }
-        icon={poll.verified && poll.notifications ? <Bell /> : <BellCrossed />}
-        disabled={requestEnableNotifications.isSuccess}
+        loading={isUpdating}
+        disabled={poll.demo}
+        icon={isWatching ? <Bell /> : <BellCrossed />}
         onClick={async () => {
-          if (!poll.verified) {
-            await requestEnableNotifications.mutateAsync({
-              adminUrlId: poll.adminUrlId,
-            });
+          if (user.isGuest) {
+            // ask to log in
+            openLoginModal();
           } else {
-            setIsUpdatingNotifications(true);
-            updatePollMutation(
-              {
-                urlId,
-                notifications: !poll.notifications,
-              },
-              {
-                onSuccess: () => {
-                  setIsUpdatingNotifications(false);
-                },
-              },
-            );
+            // toggle
+            if (isWatching) {
+              await unwatch.mutateAsync({ pollId: poll.id });
+            } else {
+              await watch.mutateAsync({ pollId: poll.id });
+            }
           }
         }}
       />