chore(service-portal): No scope notifications (#15053)

* no scope notifications

* remove unused

* Add alt texg

* Minor refactor

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/service-portal/src/components/DocumentsEmpty/DocumentsEmpty.css.ts

@@ -0,0 +1,13 @@
+import { theme } from '@island.is/island-ui/theme'
+import { style } from '@vanilla-extract/css'
+
+export const lock = style({
+  position: 'absolute',
+  zIndex: 1,
+  top: theme.spacing[2],
+  right: theme.spacing[3],
+})
+
+export const img = style({
+  height: 180,
+})

apps/service-portal/src/components/DocumentsEmpty/DocumentsEmpty.tsx

@@ -0,0 +1,59 @@
+import { Box, Icon, Text } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { m } from '@island.is/service-portal/core'
+import * as styles from './DocumentsEmpty.css'
+
+interface Props {
+  hasDelegationAccess: boolean
+}
+
+export const DocumentsEmpty = ({ hasDelegationAccess }: Props) => {
+  const { formatMessage } = useLocale()
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      paddingTop={2}
+      justifyContent="center"
+      alignItems="center"
+      rowGap={2}
+      paddingX={2}
+    >
+      <Text variant="h4">
+        {hasDelegationAccess
+          ? formatMessage(m.emptyDocumentsList)
+          : formatMessage(m.accessNeeded)}
+      </Text>
+      {!hasDelegationAccess && (
+        <Text textAlign="center" whiteSpace="preLine">
+          {formatMessage(m.accessDeniedText)}
+        </Text>
+      )}
+      <Box paddingTop={2}>
+        {
+          <img
+            src={
+              hasDelegationAccess
+                ? './assets/images/nodata.svg'
+                : './assets/images/jobsGrid.svg'
+            }
+            alt="No access"
+            className={styles.img}
+          />
+        }
+      </Box>
+      {!hasDelegationAccess && (
+        <Icon
+          color="blue600"
+          type="outline"
+          icon="lockClosed"
+          size="small"
+          className={styles.lock}
+        />
+      )}
+    </Box>
+  )
+}
+
+export default DocumentsEmpty

apps/service-portal/src/components/Header/Header.tsx

@@ -26,6 +26,7 @@ import { useWindowSize } from 'react-use'
 import NotificationButton from '../Notifications/NotificationButton'
 import Sidemenu from '../Sidemenu/Sidemenu'
 import * as styles from './Header.css'
+import { DocumentsScope } from '@island.is/auth/scopes'
 export type MenuTypes = 'side' | 'user' | 'notifications' | undefined
 
 interface Props {
@@ -57,6 +58,10 @@ export const Header = ({ position }: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const hasNotificationsDelegationAccess = user?.scopes?.includes(
+    DocumentsScope.main,
+  )
+
   return (
     <div className={styles.placeholder}>
       <PortalPageLoader />
@@ -96,7 +101,6 @@ export const Header = ({ position }: Props) => {
                       flexWrap="nowrap"
                       marginLeft={[1, 1, 2]}
                     >
-                      {user && <UserLanguageSwitcher user={user} />}
                       <Hidden below="md">
                         <Box marginRight={[1, 1, 2]} position="relative">
                           <LinkResolver
@@ -122,9 +126,12 @@ export const Header = ({ position }: Props) => {
                         <NotificationButton
                           setMenuState={(val: MenuTypes) => setMenuOpen(val)}
                           showMenu={menuOpen === 'notifications'}
+                          disabled={!hasNotificationsDelegationAccess}
                         />
                       )}
 
+                      {user && <UserLanguageSwitcher user={user} />}
+
                       <Box className={styles.overview} marginRight={[1, 1, 2]}>
                         <Button
                           variant="utility"

apps/service-portal/src/components/Layout/FullWidthLayout.tsx

@@ -19,6 +19,8 @@ import { IntroHeader, ServicePortalPaths } from '@island.is/service-portal/core'
 import { Link, matchPath, useNavigate } from 'react-router-dom'
 import { DocumentsPaths } from '@island.is/service-portal/documents'
 import { theme } from '@island.is/island-ui/theme'
+import { useAuth } from '@island.is/auth/react'
+import { DocumentsScope } from '@island.is/auth/scopes'
 
 interface FullWidthLayoutWrapperProps {
   activeParent?: PortalNavigationItem
@@ -41,27 +43,28 @@ export const FullWidthLayout: FC<FullWidthLayoutProps> = ({
 }) => {
   const navigate = useNavigate()
   const { formatMessage } = useLocale()
+  const { userInfo } = useAuth()
   const [navItems, setNavItems] = useState<PortalNavigationItem[] | undefined>()
-  const [activeChild, setActiveChild] = useState<
-    PortalNavigationItem | undefined
-  >()
 
   useEffect(() => {
     const visibleNavItems =
       activeParent?.children?.filter((item) => !item.navHide) || undefined
     setNavItems(visibleNavItems)
-
-    const activeVisibleChild = visibleNavItems?.filter(
-      (item) => item.active,
-    )?.[0]
-    setActiveChild(activeVisibleChild)
   }, [activeParent?.children])
 
+  const hasDocumentsDelegationAccess = userInfo?.scopes?.includes(
+    DocumentsScope.main,
+  )
+
   return (
     <Box
       as="main"
       component="main"
-      className={isDocuments ? styles.fullWidthSplit : undefined}
+      className={
+        isDocuments && hasDocumentsDelegationAccess
+          ? styles.fullWidthSplit
+          : undefined
+      }
       paddingTop={isDocuments || isDashboard ? undefined : 9}
       style={{
         marginTop: height,

apps/service-portal/src/components/Notifications/NotificationButton.tsx

@@ -16,9 +16,14 @@ import {
 interface Props {
   setMenuState: (val: MenuTypes) => void
   showMenu?: boolean
+  disabled?: boolean
 }
 
-const NotificationButton = ({ setMenuState, showMenu = false }: Props) => {
+const NotificationButton = ({
+  setMenuState,
+  showMenu = false,
+  disabled,
+}: Props) => {
   const { formatMessage } = useLocale()
   const [hasMarkedLocally, setHasMarkedLocally] = useState(false)
   const [markAllAsSeen] = useMarkAllNotificationsAsSeenMutation()
@@ -42,13 +47,18 @@ const NotificationButton = ({ setMenuState, showMenu = false }: Props) => {
       markAllAsSeen()
       setHasMarkedLocally(true)
     }
-  }, [showMenu, showBadge])
+  }, [showMenu, showBadge, markAllAsSeen])
 
   return (
-    <Box position="relative" marginRight={[1, 1, 2]}>
+    <Box
+      className={disabled ? styles.noScope : undefined}
+      position="relative"
+      marginRight={[1, 1, 2]}
+    >
       <Button
         variant="utility"
         colorScheme="white"
+        disabled={disabled}
         icon={showMenu && isMobile ? 'close' : 'notifications'}
         iconType="outline"
         onClick={() => {

apps/service-portal/src/components/Notifications/Notifications.css.ts

@@ -13,6 +13,17 @@ globalStyle(`${link} > span`, {
   boxShadow: 'none',
 })
 
+export const noScope = style({})
+
+globalStyle(`${noScope} button:disabled`, {
+  background: theme.color.white,
+  boxShadow: `inset 0 0 0 1px ${theme.color.blue200}`,
+})
+
+globalStyle(`${noScope} button:disabled path`, {
+  stroke: theme.color.dark300,
+})
+
 export const badge = style({
   position: 'absolute',
   top: 11,

apps/service-portal/src/screens/Dashboard/Dashboard.tsx

@@ -18,14 +18,14 @@ import {
   DocumentLine,
 } from '@island.is/service-portal/documents'
 import {
-  EmptyImageSmall,
   LinkResolver,
   PlausiblePageviewDetail,
   ServicePortalPaths,
   m,
   useDynamicRoutesWithNavigation,
 } from '@island.is/service-portal/core'
 import Greeting from '../../components/Greeting/Greeting'
+import DocumentsEmpty from '../../components/DocumentsEmpty/DocumentsEmpty'
 import { iconIdMapper, iconTypeToSVG } from '../../utils/Icons/idMapper'
 import { useWindowSize } from 'react-use'
 import { theme } from '@island.is/island-ui/theme'
@@ -234,28 +234,7 @@ export const Dashboard: FC<React.PropsWithChildren<unknown>> = () => {
                     </Box>
                   ))
                 ) : (
-                  <Box
-                    display="flex"
-                    flexDirection="column"
-                    paddingTop={2}
-                    justifyContent="center"
-                    alignItems="center"
-                    rowGap={2}
-                  >
-                    <EmptyImageSmall style={{ maxHeight: 160 }} />
-                    <Text variant="h3">
-                      {formatMessage(m.emptyDocumentsList)}
-                    </Text>
-                    {!hasDelegationAccess && (
-                      <Icon
-                        color="blue600"
-                        type="outline"
-                        icon="lockClosed"
-                        size="small"
-                        className={styles.lock}
-                      />
-                    )}
-                  </Box>
+                  <DocumentsEmpty hasDelegationAccess={!!hasDelegationAccess} />
                 )}
 
                 {hasDelegationAccess && (