outline/app/scenes/Settings/Notifications.tsx

import { debounce } from "es-toolkit/compat";
import { runInAction } from "mobx";
import { observer } from "mobx-react";
import {
  AcademicCapIcon,
  CheckboxIcon,
  CollectionIcon,
  CommentIcon,
  DocumentIcon,
  DoneIcon,
  EditIcon,
  EmailIcon,
  PublishIcon,
  SmileyIcon,
  StarredIcon,
  UserIcon,
  GroupIcon,
} from "outline-icons";
import * as React from "react";
import { useTranslation, Trans } from "react-i18next";
import { Link } from "react-router-dom";
import { toast } from "sonner";
import {
  NotificationEventType,
  NotificationChannelType,
  IntegrationService,
  IntegrationType,
} from "@shared/types";
import Heading from "~/components/Heading";
import Notice from "~/components/Notice";
import Scene from "~/components/Scene";
import Text from "~/components/Text";
import useCurrentUser from "~/hooks/useCurrentUser";
import useStores from "~/hooks/useStores";
import { client } from "~/utils/ApiClient";
import isCloudHosted from "~/utils/isCloudHosted";
import { settingsPath } from "~/utils/routeHelpers";
import ChannelSelector from "./components/ChannelSelector";
import SettingRow from "./components/SettingRow";

function Notifications() {
  const user = useCurrentUser();
  const { t } = useTranslation();
  const { integrations } = useStores();

  const hasSlackLinked = !!integrations.find({
    type: IntegrationType.LinkedAccount,
    service: IntegrationService.Slack,
  });

  const options = [
    {
      event: NotificationEventType.PublishDocument,
      icon: <PublishIcon />,
      title: t("Document published"),
      description: t(
        "Receive a notification whenever a new document is published"
      ),
    },
    {
      event: NotificationEventType.UpdateDocument,
      icon: <EditIcon />,
      title: t("Document updated"),
      description: t(
        "Receive a notification when a document you are subscribed to is edited"
      ),
    },
    {
      event: NotificationEventType.CreateComment,
      icon: <CommentIcon />,
      title: t("Comment posted"),
      description: t(
        "Receive a notification when a document you are subscribed to or a thread you participated in receives a comment"
      ),
    },
    {
      event: NotificationEventType.MentionedInComment,
      icon: <EmailIcon />,
      title: t("Mentioned"),
      description: t(
        "Receive a notification when someone mentions you in a document or comment"
      ),
    },
    {
      event: NotificationEventType.GroupMentionedInDocument,
      icon: <GroupIcon />,
      title: t("Group mentions"),
      description: t(
        "Receive a notification when someone mentions a group you are a member of in a document or comment"
      ),
    },
    {
      event: NotificationEventType.ResolveComment,
      icon: <DoneIcon />,
      title: t("Resolved"),
      description: t(
        "Receive a notification when a comment thread you were involved in is resolved"
      ),
    },
    {
      event: NotificationEventType.ReactionsCreate,
      icon: <SmileyIcon />,
      title: t("Reaction added"),
      description: t(
        "Receive a notification when someone reacts to your comment"
      ),
    },
    {
      event: NotificationEventType.CreateCollection,
      icon: <CollectionIcon />,
      title: t("Collection created"),
      description: t(
        "Receive a notification whenever a new collection is created"
      ),
    },
    {
      event: NotificationEventType.InviteAccepted,
      icon: <UserIcon />,
      title: t("Invite accepted"),
      description: t(
        "Receive a notification when someone you invited creates an account"
      ),
    },
    {
      event: NotificationEventType.AddUserToDocument,
      icon: <DocumentIcon />,
      title: t("Invited to document"),
      description: t(
        "Receive a notification when a document is shared with you"
      ),
    },
    {
      event: NotificationEventType.AddUserToCollection,
      icon: <CollectionIcon />,
      title: t("Invited to collection"),
      description: t(
        "Receive a notification when you are given access to a collection"
      ),
    },
    {
      event: NotificationEventType.ExportCompleted,
      icon: <CheckboxIcon checked />,
      title: t("Export completed"),
      description: t(
        "Receive a notification when an export you requested has been completed"
      ),
    },
    {
      event: NotificationEventType.RequestDocumentAccess,
      icon: <CheckboxIcon checked />,
      title: t("Document access requested"),
      description: t(
        "Receive a notification when a user requests access to a document you manage"
      ),
    },
    {
      visible: isCloudHosted,
      icon: <AcademicCapIcon />,
      event: NotificationEventType.Onboarding,
      title: t("Getting started"),
      description: t("Tips on getting started with features and functionality"),
    },
    {
      visible: isCloudHosted,
      icon: <StarredIcon />,
      event: NotificationEventType.Features,
      title: t("New features"),
      description: t("Receive an email when new features of note are added"),
    },
  ];

  const visibleOptions = options.filter((o) => o.visible !== false);

  const showSuccessMessage = debounce(() => {
    toast.success(t("Notifications saved"));
  }, 500);

  const handleChannelsChange = React.useCallback(
    (eventType: NotificationEventType) =>
      async (channels: NotificationChannelType[]) => {
        for (const channel of [
          NotificationChannelType.Email,
          NotificationChannelType.Slack,
        ]) {
          const shouldEnable = channels.includes(channel);
          const enabled = user.subscribedToEventType(eventType, channel);

          if (shouldEnable !== enabled) {
            await user.setNotificationEventType(
              eventType,
              shouldEnable,
              channel
            );
          }
        }
        showSuccessMessage();
      },
    [user, showSuccessMessage]
  );

  const handleToggleAll = React.useCallback(
    async (checked: boolean) => {
      runInAction(() => {
        const updated = { ...user.notificationSettings };
        for (const option of visibleOptions) {
          updated[option.event] = checked;
        }
        user.notificationSettings = updated;
      });
      await client.post(
        checked
          ? `/users.notificationsSubscribe`
          : `/users.notificationsUnsubscribe`
      );
      showSuccessMessage();
    },
    [user, visibleOptions, showSuccessMessage]
  );

  const allEnabled = visibleOptions.every((o) =>
    user.subscribedToEventType(o.event)
  );

  const showSuccessNotice = window.location.search === "?success";

  return (
    <Scene title={t("Notifications")} icon={<EmailIcon />}>
      <Heading>{t("Notifications")}</Heading>

      {showSuccessNotice && (
        <Notice>
          <Trans>
            Unsubscription successful. Your notification settings were updated
          </Trans>
        </Notice>
      )}
      <Text as="p" type="secondary">
        <Trans>
          Manage when and where you receive notifications. Choose to receive
          notifications via email, Slack, or both.
        </Trans>
      </Text>

      <SettingRow
        name="allNotifications"
        label={t("All notifications")}
        compact
        border={false}
      >
        <Switch
          id="allNotifications"
          checked={allEnabled}
          onChange={handleToggleAll}
        />
      </SettingRow>

      {!hasSlackLinked && (
        <Notice>
          <Trans
            defaults="To receive Slack notifications, <link>link your Slack account</link> in the integrations settings."
            components={{
              link: <Link to={settingsPath("slack")} />,
            }}
          />
        </Notice>
      )}

      <h2>{t("Notification Channels")}</h2>

      {options.map((option) => {
        const emailSetting = user.subscribedToEventType(
          option.event,
          NotificationChannelType.Email
        );
        const slackSetting = user.subscribedToEventType(
          option.event,
          NotificationChannelType.Slack
        );

        const enabledChannels: NotificationChannelType[] = [];
        if (emailSetting) {
          enabledChannels.push(NotificationChannelType.Email);
        }
        if (slackSetting) {
          enabledChannels.push(NotificationChannelType.Slack);
        }

        return (
          <SettingRow
            key={option.event}
            visible={option.visible}
            label={option.title}
            name={option.event}
            description={
              <Text size="small" type="secondary">
                {option.description}
              </Text>
            }
            compact
          >
            <ChannelSelector
              value={enabledChannels}
              onChange={handleChannelsChange(option.event)}
              slackDisabled={!hasSlackLinked}
            />
          </SettingRow>
        );
      })}
    </Scene>
  );
}

export default observer(Notifications);