feat: new notifications functionality available to beta-testers only

Co-authored-by: patrycjapraczyk <praczyk.patrycja@gmail.com>
ONEARMY · Feb 8, 2022 · e7d8252 · e7d8252
1 parent 8091d1b
commit e7d8252
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 16 deletions.
diff --git a/packages/cypress/src/fixtures/seed/users.json b/packages/cypress/src/fixtures/seed/users.json
@@ -53,7 +53,8 @@
     "_modified": "2019-08-15T00:00:00.000Z",
     "_authID": "oydwApNvguWQoBOpFVOzQ2yJEOF2",
     "_created": "2019-08-15T00:00:00.000Z",
-    "displayName": "event_reader"
+    "displayName": "event_reader",
+    "userRoles": ["beta-tester"]
   },
   "howto_creator": {
     "_deleted": false,
@@ -203,4 +204,4 @@
     "isExpert": null,
     "collectedPlasticTypes": null
   }
-}
+}
diff --git a/src/pages/common/Header/Header.tsx b/src/pages/common/Header/Header.tsx
@@ -15,6 +15,7 @@ import { observer, inject } from 'mobx-react'
 import { MobileMenuStore } from 'src/stores/MobileMenu/mobilemenu.store'
 import { UserStore } from 'src/stores/User/user.store'
 import { isModuleSupported, MODULE } from 'src/modules'
+import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
 
 interface IProps { }
 
@@ -98,7 +99,15 @@ export class Header extends Component<IProps> {
   }
 
   render() {
+    const menu = this.injected.mobileMenuStore
+    const user = this.injected.userStore.user
     const areThereNotifications = Boolean(
+      user?.notifications?.length &&
+        !(
+          user?.notifications?.filter(notification => !notification.read)
+            .length === 0
+        ),
+    )
 
     return (
       <>
@@ -115,15 +124,29 @@ export class Header extends Component<IProps> {
           <Flex>
             <Logo isMobile={true} />
           </Flex>
-          {user ? <MobileNotificationsWrapper>
-            <NotificationsIcon onCLick={() => menu.toggleMobileNotifications()} isMobileMenuActive={menu.showMobileNotifications}
-              areThereNotifications={areThereNotifications} />
-          </MobileNotificationsWrapper> : ""}
+          {user ? (
+            <AuthWrapper roleRequired="beta-tester">
+              <MobileNotificationsWrapper>
+                <NotificationsIcon
+                  onCLick={() => menu.toggleMobileNotifications()}
+                  isMobileMenuActive={menu.showMobileNotifications}
+                  areThereNotifications={areThereNotifications}
+                />
+              </MobileNotificationsWrapper>
+            </AuthWrapper>
+          ) : (
+            ''
+          )}
           <DesktopMenuWrapper className="menu-desktop" px={2}>
             <MenuDesktop />
-            <NotificationsDesktop />
+
             {isModuleSupported(MODULE.USER) ? (
-              <Profile isMobile={false} />
+              <>
+                <AuthWrapper roleRequired="beta-tester">
+                  <NotificationsDesktop />
+                </AuthWrapper>
+                <Profile isMobile={false} />
+              </>
             ) : null}
           </DesktopMenuWrapper>
           <MobileMenuWrapper className="menu-mobile">

diff --git a/src/pages/common/Header/Menu/Notifications/NotificationsDesktop.tsx b/src/pages/common/Header/Menu/Notifications/NotificationsDesktop.tsx
@@ -6,13 +6,11 @@ import { NotificationsModal } from './NotificationsModal'
 import NotificationsIcon from './NotificationsIcon'
 import Foco from 'react-foco'
 
-
 interface IState {
   showNotificationsModal: boolean
 }
 
-interface IProps {
-}
+interface IProps {}
 
 interface IInjectedProps extends IProps {
   userStore: UserStore
@@ -32,7 +30,9 @@ export default class NotificationsDesktop extends Component<IProps, IState> {
   }
 
   toggleNotificationsModal() {
-    this.setState({ showNotificationsModal: !this.state.showNotificationsModal })
+    this.setState({
+      showNotificationsModal: !this.state.showNotificationsModal,
+    })
   }
 
   render() {
@@ -51,8 +51,11 @@ export default class NotificationsDesktop extends Component<IProps, IState> {
       <>
         {user ? (
           <div data-cy="notifications-desktop">
-            <NotificationsIcon onCLick={() => this.toggleNotificationsModal()} isMobileMenuActive={false}
-              areThereNotifications={areThereNotifications} />
+            <NotificationsIcon
+              onCLick={() => this.toggleNotificationsModal()}
+              isMobileMenuActive={false}
+              areThereNotifications={areThereNotifications}
+            />
             <Flex>
               {showNotificationsModal && (
                 <Foco onClickOutside={() => this.toggleNotificationsModal()}>
@@ -61,8 +64,9 @@ export default class NotificationsDesktop extends Component<IProps, IState> {
               )}
             </Flex>
           </div>
-        ) : ""
-        }
+        ) : (
+          ''
+        )}
       </>
     )
   }