[CORL-3031]: User preferences for in-page notifications

client/CLIENT_EVENTS.md

@@ -141,7 +141,8 @@ createComment.error
 - <a href="#signedIn">signedIn</a>
 - <a href="#unfeatureComment">unfeatureComment</a>
 - <a href="#unmarkAll">unmarkAll</a>
-- <a href="#updateNotificationSettings">updateNotificationSettings</a>
+- <a href="#updateEmailNotificationSettings">updateEmailNotificationSettings</a>
+- <a href="#updateInPageNotificationSettings">updateInPageNotificationSettings</a>
 - <a href="#updateStorySettings">updateStorySettings</a>
 - <a href="#updateUserMediaSettings">updateUserMediaSettings</a>
 - <a href="#viewConversation">viewConversation</a>
@@ -614,7 +615,7 @@ createComment.error
       source: "keyboard" | "mobileToolbar";
   }
   ```
-- <a id="updateNotificationSettings">**updateNotificationSettings.success**, **updateNotificationSettings.error**</a>: This event is emitted when the viewer updates its notification settings.
+- <a id="updateEmailNotificationSettings">**updateEmailNotificationSettings.success**, **updateEmailNotificationSettings.error**</a>: This event is emitted when the viewer updates their email notification settings.
   ```ts
   {
       onReply?: boolean | null | undefined;
@@ -629,6 +630,22 @@ createComment.error
       };
   }
   ```
+- <a id="updateInPageNotificationSettings">**updateInPageNotificationSettings.success**, **updateInPageNotificationSettings.error**</a>: This event is emitted when the viewer updates their in-page notification settings.
+  ```ts
+  {
+      onReply?: boolean | null | undefined;
+      onFeatured?: boolean | null | undefined;
+      onStaffReplies?: boolean | null | undefined;
+      onModeration?: boolean | null | undefined;
+      includeCountInBadge?: boolean | null | undefined;
+      bellRemainsVisible?: boolean | null | undefined;
+      success: {};
+      error: {
+          message: string;
+          code?: string | undefined;
+      };
+  }
+  ```
 - <a id="updateStorySettings">**updateStorySettings.success**, **updateStorySettings.error**</a>: This event is emitted when the viewer updates the story settings.
   ```ts
   {

client/src/core/client/stream/classes.ts

@@ -5,15 +5,15 @@ const CLASSES = {
   app: "coral coral-stream",
 
   /**
-   * guidlines represents the box containing the guidlines.
+   * guidelines represents the box containing the guidelines.
    */
   guidelines: {
     container: "coral coral-guidelines",
     content: "coral coral-guidelines-content",
   },
 
   /**
-   * guidlines represents the box containing the guidlines.
+   * announcement represents the box containing the announcement.
    */
   announcement: "coral coral-announcement",
 
@@ -1059,11 +1059,13 @@ const CLASSES = {
     openButton: "coral coral-openCommentStream-openButton",
   },
 
-  emailNotifications: {
-    $root: "coral coral-emailNotifications",
-    heading: "coral coral-emailNotifications-heading",
-    label: "coral coral-emailNotifications-label",
-    updateButton: "coral coral-emailNotifications-updateButton",
+  notifications: {
+    $root: "coral coral-emailNotifications coral-notifications",
+    heading:
+      "coral coral-emailNotifications-heading coral-notifications-heading",
+    label: "coral coral-emailNotifications-label coral-notifications-label",
+    updateButton:
+      "coral coral-emailNotifications-updateButton coral-notifications-updateButton",
   },
 
   mediaPreferences: {

client/src/core/client/stream/events.ts

@@ -23,7 +23,7 @@ import {
 } from "coral-framework/lib/events";
 
 import { COMMENT_STATUS } from "./__generated__/CreateCommentMutation.graphql";
-import { DIGEST_FREQUENCY } from "./__generated__/NotificationSettingsContainer_viewer.graphql";
+import { DIGEST_FREQUENCY } from "./__generated__/EmailNotificationSettingsContainer_viewer.graphql";
 import { MODERATION_MODE } from "./__generated__/UpdateStorySettingsMutation.graphql";
 
 /**
@@ -201,10 +201,10 @@ export const SignOutEvent = createViewerNetworkEvent<{
 export const SignedInEvent = createViewerEvent("signedIn");
 
 /**
- * This event is emitted when the viewer updates its
- * notification settings.
+ * This event is emitted when the viewer updates their
+ * email notification settings.
  */
-export const UpdateNotificationSettingsEvent = createViewerNetworkEvent<{
+export const UpdateEmailNotificationSettingsEvent = createViewerNetworkEvent<{
   onReply?: boolean | null;
   onFeatured?: boolean | null;
   onStaffReplies?: boolean | null;
@@ -215,7 +215,25 @@ export const UpdateNotificationSettingsEvent = createViewerNetworkEvent<{
     message: string;
     code?: string;
   };
-}>("updateNotificationSettings");
+}>("updateEmailNotificationSettings");
+
+/**
+ * This event is emitted when the viewer updates their
+ * in-page notification settings.
+ */
+export const UpdateInPageNotificationSettingsEvent = createViewerNetworkEvent<{
+  onReply?: boolean | null;
+  onFeatured?: boolean | null;
+  onStaffReplies?: boolean | null;
+  onModeration?: boolean | null;
+  includeCountInBadge?: boolean | null;
+  bellRemainsVisible?: boolean | null;
+  success: {};
+  error: {
+    message: string;
+    code?: string;
+  };
+}>("updateInPageNotificationSettings");
 
 export const UpdateUserMediaSettingsEvent = createViewerNetworkEvent<{
   unfurlEmbeds?: boolean | null;

client/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.css → client/src/core/client/stream/tabs/Profile/Preferences/EmailNotificationSettingsContainer.css

@@ -3,6 +3,7 @@
   font-weight: var(--font-weight-primary-semi-bold);
   font-size: var(--font-size-4);
   line-height: 1.11;
+  margin: 0;
 
   color: var(--palette-text-900);
 

client/src/core/client/stream/tabs/Profile/Preferences/NotificationSettingsContainer.tsx → client/src/core/client/stream/tabs/Profile/Preferences/EmailNotificationSettingsContainer.tsx

@@ -25,22 +25,22 @@ import {
 } from "coral-ui/components/v2";
 import { Button, CallOut } from "coral-ui/components/v3";
 
-import { NotificationSettingsContainer_viewer } from "coral-stream/__generated__/NotificationSettingsContainer_viewer.graphql";
+import { EmailNotificationSettingsContainer_viewer } from "coral-stream/__generated__/EmailNotificationSettingsContainer_viewer.graphql";
 
-import UpdateNotificationSettingsMutation from "./UpdateNotificationSettingsMutation";
+import UpdateEmailNotificationSettingsMutation from "./UpdateEmailNotificationSettingsMutation";
 
-import styles from "./NotificationSettingsContainer.css";
+import styles from "./EmailNotificationSettingsContainer.css";
 
 interface Props {
-  viewer: NotificationSettingsContainer_viewer;
+  viewer: EmailNotificationSettingsContainer_viewer;
 }
 
-type FormProps = NotificationSettingsContainer_viewer["notifications"];
+type FormProps = EmailNotificationSettingsContainer_viewer["notifications"];
 
-const NotificationSettingsContainer: FunctionComponent<Props> = ({
+const EmailNotificationSettingsContainer: FunctionComponent<Props> = ({
   viewer: { notifications },
 }) => {
-  const mutation = useMutation(UpdateNotificationSettingsMutation);
+  const mutation = useMutation(UpdateEmailNotificationSettingsMutation);
   const [showSuccess, setShowSuccess] = useState(false);
   const [showError, setShowError] = useState(false);
   const closeSuccess = useCallback(() => {
@@ -73,7 +73,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
   return (
     <HorizontalGutter
       data-testid="profile-account-notifications"
-      className={CLASSES.emailNotifications.$root}
+      className={CLASSES.notifications.$root}
       container="section"
       aria-labelledby="profile-account-notifications-emailNotifications-title"
     >
@@ -90,10 +90,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
               <HorizontalGutter>
                 <Localized id="profile-account-notifications-emailNotifications">
                   <h2
-                    className={cn(
-                      styles.title,
-                      CLASSES.emailNotifications.heading
-                    )}
+                    className={cn(styles.title, CLASSES.notifications.heading)}
                     id="profile-account-notifications-emailNotifications-title"
                   >
                     Email Notifications
@@ -103,10 +100,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
               <HorizontalGutter>
                 <Localized id="profile-account-notifications-receiveWhen">
                   <div
-                    className={cn(
-                      styles.header,
-                      CLASSES.emailNotifications.label
-                    )}
+                    className={cn(styles.header, CLASSES.notifications.label)}
                     id="profile-account-notifications-receiveWhen"
                   >
                     Receive notifications when:
@@ -183,7 +177,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
                         className={cn(
                           styles.header,
                           styles.sendNotifications,
-                          CLASSES.emailNotifications.label
+                          CLASSES.notifications.label
                         )}
                         htmlFor="digestFrequency"
                       >
@@ -238,7 +232,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
                   <Button
                     type="submit"
                     disabled={submitting || pristine}
-                    className={CLASSES.emailNotifications.updateButton}
+                    className={CLASSES.notifications.updateButton}
                     upperCase
                   >
                     Update
@@ -288,7 +282,7 @@ const NotificationSettingsContainer: FunctionComponent<Props> = ({
 
 const enhanced = withFragmentContainer<Props>({
   viewer: graphql`
-    fragment NotificationSettingsContainer_viewer on User {
+    fragment EmailNotificationSettingsContainer_viewer on User {
       notifications {
         onReply
         onFeatured
@@ -298,6 +292,6 @@ const enhanced = withFragmentContainer<Props>({
       }
     }
   `,
-})(NotificationSettingsContainer);
+})(EmailNotificationSettingsContainer);
 
 export default enhanced;

client/src/core/client/stream/tabs/Profile/Preferences/InPageNotificationSettingsContainer.css

@@ -0,0 +1,57 @@
+.bellIcon {
+  margin-right: var(--spacing-1);
+}
+
+.title {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-4);
+  line-height: 1.11;
+  margin: 0;
+
+  color: var(--palette-text-900);
+
+  padding-bottom: var(--spacing-1);
+}
+
+.header {
+  display: inline-block;
+
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-bold);
+  font-size: var(--font-size-2);
+  line-height: 1.14;
+
+  color: var(--palette-text-500);
+
+  padding-bottom: var(--spacing-1);
+}
+
+.sendNotifications {
+  padding-top: var(--spacing-1);
+}
+
+.checkBox {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-regular);
+  font-size: var(--font-size-3);
+  line-height: 1.125;
+
+  color: var(--palette-text-500);
+
+  padding-bottom: var(--spacing-2);
+}
+
+.updateButton {
+  padding-top: var(--spacing-2);
+  padding-bottom: var(--spacing-3);
+}
+
+.updateButtonNotification {
+  padding-top: var(--spacing-2);
+  padding-bottom: var(--spacing-1);
+}
+
+.callOut {
+  padding-bottom: var(--spacing-2);
+}