feat(consultation-portal): KAM-2522: PowerBI report added (#15251)

apps/consultation-portal/components/Layout/Layout.json

@@ -16,6 +16,10 @@
         "label": "Áskriftir",
         "href": "/askriftir"
       },
+      {
+        "label": "Tölfræði",
+        "href": "/tolfraedi"
+      },
       {
         "label": "Mínar umsagnir",
         "href": "/umsagnir"

apps/consultation-portal/components/Layout/components/Menu/components/MenuItems/MenuItems.ts

@@ -13,14 +13,14 @@ export const menuItems = [
     href: loc[1].href,
     testId: 'subscriptions-btn',
   },
-  // Tölfræði is hidden until PowerBI
-  // {
-  //   label: 'Tölfræði',
-  //   href: '/tolfraedi',
-  // },
   {
     label: loc[2].label,
     href: loc[2].href,
+    testId: 'statistics-btn',
+  },
+  {
+    label: loc[3].label,
+    href: loc[3].href,
     testId: 'advices-btn',
   },
 ]

apps/consultation-portal/components/PowerBI/PowerBI.tsx

@@ -0,0 +1,31 @@
+import { useRef } from 'react'
+import { PowerBIEmbed } from 'powerbi-client-react'
+import { type Embed, models } from 'powerbi-client'
+
+export const PowerBI = () => {
+  const embedRef = useRef<Embed | null>(null)
+
+  const getEmbeddedComponent = (embed: Embed) => {
+    embed.element.style.height = '700px'
+    embed.element.style.width = '100%'
+    embed.iframe.style.border = 'none'
+    embedRef.current = embed
+  }
+
+  return (
+    <PowerBIEmbed
+      embedConfig={{
+        type: 'report',
+        tokenType: models.TokenType.Embed,
+        embedUrl:
+          'https://app.powerbi.com/view?r=eyJrIjoiZjFjOWRlODEtNGFlNS00MDkxLTlhNmYtNGUxY2Y0ZWM0M2E5IiwidCI6ImJjMTRhNDRlLWUwZmItNGUwYi1hNTM1LTEwMDU3OWQ0MWI2NSIsImMiOjh9',
+        settings: {
+          layoutType: models.LayoutType.MobilePortrait,
+        },
+      }}
+      getEmbeddedComponent={getEmbeddedComponent}
+    />
+  )
+}
+
+export default PowerBI

apps/consultation-portal/components/PowerBI/index.ts

@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+export const PowerBIComponent = dynamic(() => import('./PowerBI'), {
+  ssr: false,
+})

apps/consultation-portal/pages/tolfraedi/index.tsx

@@ -0,0 +1,5 @@
+import { StatisticsScreen } from '../../screens/Statistics/Statistics'
+
+export const Index = () => <StatisticsScreen />
+
+export default Index

apps/consultation-portal/pages/user/link-expired/index.tsx

@@ -0,0 +1,7 @@
+import LinkExpiredScreen from '../../../screens/EmailVerified/LinkExpired'
+
+export const Index = () => {
+  return <LinkExpiredScreen />
+}
+
+export default Index

apps/consultation-portal/pages/user/not-found/index.tsx

@@ -0,0 +1,7 @@
+import NotFoundScreen from '../../../screens/EmailVerified/NotFound'
+
+export const Index = () => {
+  return <NotFoundScreen />
+}
+
+export default Index

apps/consultation-portal/screens/EmailVerified/EmailVerified.json

@@ -8,5 +8,25 @@
     "emailVerifiedText": "Netfang staðfest",
     "text": "Nú geturðu skráð þig í áskrift að málum, hægt er að velja um nokkrar leiðir.",
     "arrowLinkText": "Aftur á forsíðu"
+  },
+  "linkExpired": {
+    "seo": {
+      "title": "Hlekkur útrunninn",
+      "url": "/user/link-expired"
+    },
+    "failText": "Aðgerð tókst ekki",
+    "linkExpiredText": "Hlekkur útrunninn",
+    "text": "Hlekkur er útrunninn, vinsamlegast athugaðu að hlekkur sé ekki eldri en 24 klukkustundir. Vinsamlegast sláðu inn netfang aftur og fáðu nýjan hlekk.",
+    "arrowLinkText": "Aftur á forsíðu"
+  },
+  "notFound": {
+    "seo": {
+      "title": "Eitthvað fór úrskeiðis",
+      "url": "/user/not-found"
+    },
+    "failText": "Aðgerð tókst ekki",
+    "notFoundText": "Eitthvað fór úrskeiðis",
+    "text": "Reyndu aftur eða hafðu samband.",
+    "arrowLinkText": "Aftur á forsíðu"
   }
 }

apps/consultation-portal/screens/EmailVerified/LinkExpired.tsx

@@ -0,0 +1,46 @@
+import {
+  ArrowLink,
+  Box,
+  GridColumn,
+  GridContainer,
+  GridRow,
+  Text,
+} from '@island.is/island-ui/core'
+import { Layout } from '../../components'
+import localization from './EmailVerified.json'
+
+export const LinkExpiredScreen = () => {
+  const loc = localization['linkExpired']
+  return (
+    <Layout seo={{ title: loc.seo.title, url: loc.seo.url }}>
+      <GridContainer>
+        <GridRow>
+          <GridColumn span={'12/12'} paddingBottom={10} paddingTop={8}>
+            <Box
+              display="flex"
+              flexDirection="column"
+              width="full"
+              alignItems="center"
+            >
+              <Text
+                variant="eyebrow"
+                as="div"
+                paddingBottom={2}
+                color="purple400"
+              >
+                {loc.failText}
+              </Text>
+
+              <Text variant="h1" as="h1" paddingBottom={3}>
+                {loc.linkExpiredText}
+              </Text>
+              <Text paddingBottom={3}>{loc.text}</Text>
+              <ArrowLink href="/">{loc.arrowLinkText}</ArrowLink>
+            </Box>
+          </GridColumn>
+        </GridRow>
+      </GridContainer>
+    </Layout>
+  )
+}
+export default LinkExpiredScreen

apps/consultation-portal/screens/EmailVerified/NotFound.tsx

@@ -0,0 +1,46 @@
+import {
+  ArrowLink,
+  Box,
+  GridColumn,
+  GridContainer,
+  GridRow,
+  Text,
+} from '@island.is/island-ui/core'
+import { Layout } from '../../components'
+import localization from './EmailVerified.json'
+
+export const NotFoundScreen = () => {
+  const loc = localization['notFound']
+  return (
+    <Layout seo={{ title: loc.seo.title, url: loc.seo.url }}>
+      <GridContainer>
+        <GridRow>
+          <GridColumn span={'12/12'} paddingBottom={10} paddingTop={8}>
+            <Box
+              display="flex"
+              flexDirection="column"
+              width="full"
+              alignItems="center"
+            >
+              <Text
+                variant="eyebrow"
+                as="div"
+                paddingBottom={2}
+                color="purple400"
+              >
+                {loc.failText}
+              </Text>
+
+              <Text variant="h1" as="h1" paddingBottom={3}>
+                {loc.notFoundText}
+              </Text>
+              <Text paddingBottom={3}>{loc.text}</Text>
+              <ArrowLink href="/">{loc.arrowLinkText}</ArrowLink>
+            </Box>
+          </GridColumn>
+        </GridRow>
+      </GridContainer>
+    </Layout>
+  )
+}
+export default NotFoundScreen

apps/consultation-portal/screens/Statistics/Statistics.json

@@ -0,0 +1,19 @@
+{
+  "statistics": {
+    "seo": {
+      "title": "Tölfræði",
+      "url": "/tolfraedi",
+      "description": "Tölfræði um samráðsgátt",
+      "keywords": ""
+    },
+    "breadcrumbs": [
+      {
+        "title": "Samráðsgátt",
+        "href": "/samradsgatt"
+      },
+      {
+        "title": "Tölfræði"
+      }
+    ]
+  }
+}

apps/consultation-portal/screens/Statistics/Statistics.tsx

@@ -0,0 +1,32 @@
+import { GridContainer } from '@island.is/island-ui/core'
+
+import { Breadcrumbs, Layout } from '../../components'
+import localization from './Statistics.json'
+import { PowerBIComponent } from '../../components/PowerBI'
+
+export const StatisticsScreen = () => {
+  const loc = localization['statistics']
+
+  return (
+    <Layout
+      seo={{
+        title: loc.seo.title,
+        url: loc.seo.url,
+        description: loc.seo.description,
+        keywords: loc.seo.keywords,
+      }}
+    >
+      <Breadcrumbs
+        items={[
+          { title: loc.breadcrumbs[0].title, href: loc.breadcrumbs[0].href },
+          { title: loc.breadcrumbs[1].title },
+        ]}
+      />
+      <GridContainer>
+        <PowerBIComponent />
+      </GridContainer>
+    </Layout>
+  )
+}
+
+export default StatisticsScreen