disable notifs summer 2024 (#274)

* disable notifs summer 2024 * update snapshots * disable new section notifications input
sandboxnu · Jun 18, 2024 · 79afd68 · 79afd68
1 parent 6e1bbfb
commit 79afd68
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 18 deletions.
diff --git a/components/ResultsPage/Results/NotifSignUpButton.tsx b/components/ResultsPage/Results/NotifSignUpButton.tsx
@@ -13,11 +13,14 @@ export default function NotifSignUpButton({
     macros.logAmplitudeEvent('Notifs Button');
   };
 
+  const NOTIFICATIONS_ARE_DISABLED = true;
+
   return (
     <button
+      disabled={NOTIFICATIONS_ARE_DISABLED}
       onClick={onClickWithAmplitudeHook}
       type="button"
-      className="Results_SignIn"
+      className={`Results_SignIn ${NOTIFICATIONS_ARE_DISABLED && 'disabledButton'}`}
     >
       Sign In
     </button>

diff --git a/components/notifications/DisabledNotificationsModal.tsx b/components/notifications/DisabledNotificationsModal.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement } from 'react';
+import Modal from '../Modal';
+import X from '../icons/X.svg';
+import CryingHusky3 from '../icons/crying-husky-3.svg';
+
+interface DisabledNotificationsModalProps {
+  visible: boolean;
+  onCancel: () => void;
+}
+
+export default function DisabledNotificationsModal({
+  visible,
+  onCancel,
+}: DisabledNotificationsModalProps): ReactElement {
+  return (
+    <Modal visible={visible} onCancel={onCancel}>
+      <div className="phone-modal">
+        <div className="phone-modal__body">
+          <div className="phone-modal__action-btns">
+            <button
+              onClick={onCancel}
+              className="phone-modal__action-btn phone-modal__action-btn--x"
+            >
+              <X />
+            </button>
+          </div>
+          <CryingHusky3 />
+          <span className="phone-modal__header">Notifications have paused for the summer</span>
+
+          <span className="phone-modal__label">
+            Due to cost issues, we{`'`}re putting notifications on pause until we acquire additional funding in the fall.
+          </span>        
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/components/panels/CourseCheckBox.tsx b/components/panels/CourseCheckBox.tsx
@@ -27,6 +27,7 @@ export default function CourseCheckBox({
 }: CourseCheckBoxProps): ReactElement {
   const [showModal, setShowModal] = useState(false);
   const [notifSwitchId] = useState(uniqueId('notifSwitch-'));
+  const NOTIFICATIONS_ARE_DISABLED = true;
 
   const isCourseChecked = (): boolean =>
     userInfo && userInfo.courseIds.includes(Keys.getClassHash(course));
@@ -76,15 +77,16 @@ export default function CourseCheckBox({
       <div className="signUpSwitch toggle">
         <div className="notifSwitch">
           <input
+            disabled={NOTIFICATIONS_ARE_DISABLED}
             checked={checked}
             onChange={onCheckboxClick}
             className="react-switch-checkbox"
             id={notifSwitchId}
             type="checkbox"
           />
           <label
-            className="react-switch-label"
-            style={{ marginTop: '0px' }}
+            className={`react-switch-label ${NOTIFICATIONS_ARE_DISABLED && 'disabledButton'}`}
+            style={{ marginTop: '0px', cursor: `${NOTIFICATIONS_ARE_DISABLED ? 'not-allowed' : 'inherit'}` }}
             htmlFor={notifSwitchId}
           >
             <span className="react-switch-button" />

diff --git a/components/panels/SectionCheckBox.tsx b/components/panels/SectionCheckBox.tsx
@@ -30,6 +30,8 @@ export default function SectionCheckBox({
   const [showModal, setShowModal] = useState(false);
   const [notifSwitchId] = useState(uniqueId('notifSwitch-'));
 
+  const NOTIFICATIONS_ARE_DISABLED = true;
+
   const isSectionChecked = (): boolean =>
     userInfo
       ? userInfo.sectionIds.includes(Keys.getSectionHash(section))
@@ -96,21 +98,22 @@ export default function SectionCheckBox({
       <div className="signUpSwitch">
         <div className="notifSwitch">
           <input
+            disabled={NOTIFICATIONS_ARE_DISABLED}
             checked={checked}
             onChange={onCheckboxClick}
             className="react-switch-checkbox"
             id={notifSwitchId}
             type="checkbox"
           />
           <label
-            className="react-switch-label"
-            style={{ marginTop: '0px' }}
+            className={`react-switch-label ${NOTIFICATIONS_ARE_DISABLED && 'disabledButton'}`}
+            style={{ marginTop: '0px', cursor: `${NOTIFICATIONS_ARE_DISABLED ? 'not-allowed' : 'inherit'}` }}
             htmlFor={notifSwitchId}
           >
             <span className="react-switch-button" />
           </label>
         </div>
-        <Tooltip
+        {!NOTIFICATIONS_ARE_DISABLED && <Tooltip
           text={
             !userInfo
               ? 'Sign in to subscribe for notifications.'
@@ -119,7 +122,7 @@ export default function SectionCheckBox({
               : 'Subscribe to notifications for this section'
           }
           direction={TooltipDirection.Up}
-        />
+        />}
       </div>
       <SignUpModal
         visible={showModal}

diff --git a/components/tests/pages/__snapshots__/Home.test.js.snap b/components/tests/pages/__snapshots__/Home.test.js.snap
@@ -20,7 +20,7 @@ exports[`should render a section 1`] = `
       <div className=\\"signInButtonContainer\\">
         <DropdownMenuWrapper userInfo={{...}} onSignIn={[Function: onSignIn]} onSignOut={[Function: onSignOut]} />
       </div>
-      <TestimonialModal visible={false} onCancel={[Function: onCancel]} />
+      <DisabledNotificationsModal visible={false} onCancel={[Function: onCancel]} />
       <div>
         <div className=\\"ui center spacing aligned icon header topHeader\\">
           <div className=\\"centerTextContainer\\">

diff --git a/components/tests/pages/__snapshots__/Result.test.tsx.snap b/components/tests/pages/__snapshots__/Result.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`should render a section 1`] = `
               <div className=\\"Results__spacer\\" />
               <DropdownMenuWrapper onSignIn={[Function: onSignIn]} onSignOut={[Function: onSignOut]} userInfo={{...}}>
                 <NotifSignUpButton onNotifSignUp={[Function: onNotifSignUp]}>
-                  <button onClick={[Function: onClickWithAmplitudeHook]} type=\\"button\\" className=\\"Results_SignIn\\">
+                  <button disabled={true} onClick={[Function: onClickWithAmplitudeHook]} type=\\"button\\" className=\\"Results_SignIn disabledButton\\">
                     Sign In
                   </button>
                 </NotifSignUpButton>

diff --git a/pages/[campus]/[termId].tsx b/pages/[campus]/[termId].tsx
@@ -16,7 +16,7 @@ import Husky from '../../components/icons/Husky';
 import Logo from '../../components/icons/Logo';
 import LoadingContainer from '../../components/ResultsPage/LoadingContainer';
 import { Campus } from '../../components/types';
-import TestimonialModal from '../../components/Testimonial/TestimonialModal';
+// import TestimonialModal from '../../components/Testimonial/TestimonialModal';
 import getTermInfosWithError from '../../utils/TermInfoProvider';
 import { DropdownMenuWrapper } from '../../components/Header';
 import useUserInfo from '../../utils/useUserInfo';
@@ -27,6 +27,7 @@ import GraduateLogo from '../../components/icons/GraduateLogo';
 import Cookies from 'universal-cookie';
 import TestimonialToast from '../../components/Testimonial/TestimonialToast';
 import macros from '../../components/macros';
+import DisabledNotificationsModal from '../../components/notifications/DisabledNotificationsModal';
 
 const grad_banner_data: AlertBannerData = {
   text: 'has just released!',
@@ -49,20 +50,38 @@ export default function Home(): ReactElement {
 
   const { userInfo, fetchUserInfo, onSignIn, onSignOut } = useUserInfo();
 
-  const [showHelpModal, setShowHelpModal] = useState(false);
 
-  const fetchFeedbackToken = async (): Promise<void> => {
+  const [showNotificationsDisabledModal, setShowNotificationsDisabledModal] = useState(false);
+
+  const fetchNotificationsToken = async (): Promise<void> => {
     const cookies = new Cookies();
-    const existingToken = cookies.get('FeedbackModal JWT');
+    const existingToken = cookies.get('NotificationsModal JWT');
+    // Show modal twice
     if (!existingToken) {
-      setShowHelpModal(true);
-      const newtoken = 'alreadyShowedModal';
-      cookies.set('FeedbackModal JWT', newtoken, { path: '/' });
+      setShowNotificationsDisabledModal(true);
+      cookies.set('NotificationsModal JWT', 1, { path: '/' });
+    } else if (parseFloat(existingToken) < 2) {
+      setShowNotificationsDisabledModal(true);
+      cookies.set('NotificationsModal JWT', 2, { path: '/' });
     }
   };
 
+  // Remove if no longer a need for the testimonial modal
+  // const [showHelpModal, setShowHelpModal] = useState(false);
+
+  // const fetchFeedbackToken = async (): Promise<void> => {
+  //   const cookies = new Cookies();
+  //   const existingToken = cookies.get('FeedbackModal JWT');
+  //   if (!existingToken) {
+  //     setShowHelpModal(true);
+  //     const newtoken = 'alreadyShowedModal';
+  //     cookies.set('FeedbackModal JWT', newtoken, { path: '/' });
+  //   }
+  // };
+
   useEffect(() => {
-    fetchFeedbackToken();
+    // fetchFeedbackToken();
+    fetchNotificationsToken();
     fetchUserInfo();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -106,9 +125,15 @@ export default function Home(): ReactElement {
             />
           </div>
 
-          <TestimonialModal
+          {/* Remove this if there is no longer a need for the testimonial modal */}
+          {/* <TestimonialModal
             visible={showHelpModal}
             onCancel={() => setShowHelpModal(false)}
+          /> */}
+
+          <DisabledNotificationsModal
+            visible={showNotificationsDisabledModal}
+            onCancel={() => setShowNotificationsDisabledModal(false)}
           />
 
           <div>

diff --git a/styles/pages/_Results.scss b/styles/pages/_Results.scss
@@ -51,6 +51,11 @@ $SIDEBAR_WIDTH: 268px;
   white-space: nowrap;
 }
 
+.disabledButton {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .Results__mobileSearchFilterWrapper {
   @media only screen and (max-width: 767px) {
     display: flex;