diff --git a/apps/service-portal/src/components/DocumentsEmpty/DocumentsEmpty.css.ts b/apps/service-portal/src/components/DocumentsEmpty/DocumentsEmpty.css.ts
new file mode 100644
index 000000000000..3ae765b21300
--- /dev/null
+++ b/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,
+})
diff --git a/apps/service-portal/src/components/DocumentsEmpty/DocumentsEmpty.tsx b/apps/service-portal/src/components/DocumentsEmpty/DocumentsEmpty.tsx
new file mode 100644
index 000000000000..516d77d1db4b
--- /dev/null
+++ b/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 (
+
+
+ {hasDelegationAccess
+ ? formatMessage(m.emptyDocumentsList)
+ : formatMessage(m.accessNeeded)}
+
+ {!hasDelegationAccess && (
+
+ {formatMessage(m.accessDeniedText)}
+
+ )}
+
+ {
+
+ }
+
+ {!hasDelegationAccess && (
+
+ )}
+
+ )
+}
+
+export default DocumentsEmpty
diff --git a/apps/service-portal/src/components/Header/Header.tsx b/apps/service-portal/src/components/Header/Header.tsx
index 5bd6d74d1eab..21c913b99da0 100644
--- a/apps/service-portal/src/components/Header/Header.tsx
+++ b/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 (
@@ -96,7 +101,6 @@ export const Header = ({ position }: Props) => {
flexWrap="nowrap"
marginLeft={[1, 1, 2]}
>
- {user &&
}
{
setMenuOpen(val)}
showMenu={menuOpen === 'notifications'}
+ disabled={!hasNotificationsDelegationAccess}
/>
)}
+ {user && }
+