From 1a1b4a6eca007cae0c6a8378e99747ad4599ee3e Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Wed, 8 Nov 2023 17:30:33 -0500
Subject: [PATCH] chore: make notification display by default

---
 src/courseware/course/Course.jsx                     | 12 ------------
 .../course/sidebar/SidebarContextProvider.jsx        | 11 ++++++++++-
 src/data/sessionStorage.js                           |  2 +-
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index 76873b06e3..459d76bee0 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -17,7 +17,6 @@ import SidebarProvider from './sidebar/SidebarContextProvider';
 import SidebarTriggers from './sidebar/SidebarTriggers';
 
 import { useModel } from '../../generic/model-store';
-import { getSessionStorage, setSessionStorage } from '../../data/sessionStorage';
 
 const Course = ({
   courseId,
@@ -32,7 +31,6 @@ const Course = ({
   const {
     celebrations,
     isStaff,
-    verifiedMode,
   } = useModel('courseHomeMeta', courseId);
   const sequence = useModel('sequences', sequenceId);
   const section = useModel('sections', sequence ? sequence.sectionId : null);
@@ -55,16 +53,6 @@ const Course = ({
   const shouldDisplayTriggers = windowWidth >= breakpoints.small.minWidth;
   const daysPerWeek = course?.courseGoals?.selectedGoal?.daysPerWeek;
 
-  // 1. open the notification tray if the user has not purchased the course and is on a desktop
-  // 2. default to close on the first time access
-  // 3. use the last state if the user has access the course before
-  const shouldDisplayNotificationTrayOpenOnLoad = windowWidth > breakpoints.medium.minWidth && !!verifiedMode;
-  if (shouldDisplayNotificationTrayOpenOnLoad) {
-    setSessionStorage(`notificationTrayStatus.${courseId}`, 'open');
-  } else if (!getSessionStorage(`notificationTrayStatus.${courseId}`)) {
-    setSessionStorage(`notificationTrayStatus.${courseId}`, 'closed');
-  }
-
   useEffect(() => {
     const celebrateFirstSection = celebrations && celebrations.firstSection;
     setFirstSectionCelebrationOpen(shouldCelebrateOnSectionLoad(
diff --git a/src/courseware/course/sidebar/SidebarContextProvider.jsx b/src/courseware/course/sidebar/SidebarContextProvider.jsx
index b61c577b19..8a4be654fc 100644
--- a/src/courseware/course/sidebar/SidebarContextProvider.jsx
+++ b/src/courseware/course/sidebar/SidebarContextProvider.jsx
@@ -4,7 +4,10 @@ import React, {
   useEffect, useState, useMemo, useCallback,
 } from 'react';
 
+import { useModel } from '../../../generic/model-store';
 import { getLocalStorage, setLocalStorage } from '../../../data/localStorage';
+import { getSessionStorage } from '../../../data/sessionStorage';
+
 import SidebarContext from './SidebarContext';
 import { SIDEBARS } from './sidebars';
 
@@ -13,6 +16,8 @@ const SidebarProvider = ({
   unitId,
   children,
 }) => {
+  const { verifiedMode } = useModel('courseHomeMeta', courseId);
+
   const shouldDisplayFullScreen = useWindowSize().width < breakpoints.large.minWidth;
   const shouldDisplaySidebarOpen = useWindowSize().width > breakpoints.medium.minWidth;
   const query = new URLSearchParams(window.location.search);
@@ -22,7 +27,11 @@ const SidebarProvider = ({
   const [upgradeNotificationCurrentState, setUpgradeNotificationCurrentState] = useState(getLocalStorage(`upgradeNotificationCurrentState.${courseId}`));
 
   useEffect(() => {
-    setCurrentSidebar(SIDEBARS.DISCUSSIONS.ID);
+    // if the user has not purchased the course or previously opened the notification tray, show the notification tray
+    const showNotificationsOnLoad = !!verifiedMode || getSessionStorage(`notificationTrayStatus.${courseId}`) !== 'closed';
+    if (showNotificationsOnLoad) {
+      setCurrentSidebar(SIDEBARS.NOTIFICATIONS.ID);
+    }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [unitId]);
 
diff --git a/src/data/sessionStorage.js b/src/data/sessionStorage.js
index fe86b577d0..ef809330d3 100644
--- a/src/data/sessionStorage.js
+++ b/src/data/sessionStorage.js
@@ -21,7 +21,7 @@ function getSessionStorage(key) {
 function setSessionStorage(key, value) {
   try {
     if (global.sessionStorage) {
-      global.sessionStorage.setItem(key, JSON.stringify(value));
+      global.sessionStorage.setItem(key, value);
     }
   } catch (e) {
     // If this fails, just bail.