feat(my-pages): WIP - Health overview

apps/portals/my-pages/src/lib/masterNavigation.ts

@@ -27,6 +27,7 @@ import { companySignatureCollectionNavigation } from '@island.is/portals/my-page
 export const rootNavigationItem: PortalNavigationItem = {
   name: m.overview,
   systemRoute: true,
+  breadcrumbHide: true,
   path: ServicePortalPaths.Root,
   icon: {
     icon: 'dots',

libs/portals/my-pages/core/src/components/IntroWrapper/IntroWrapper.tsx

@@ -95,25 +95,37 @@ export const IntroWrapper = (props: IntroWrapperProps) => {
             </>
           )}
         </GridColumn>
-        {!isMobile && props.serviceProviderSlug && organization?.link && (
+        {!isMobile && (
           <GridColumn span={'2/8'} offset={isTablet ? '0' : '1/8'}>
-            <InstitutionPanel
-              loading={loading}
-              linkHref={organization.link ?? ''}
-              linkLabel={
-                organization.title
-                  ? formatMessage(m.readMoreAbout, {
-                      arg: organization.title,
-                    })
-                  : ''
-              }
-              img={organization.logo?.url ?? ''}
-              imgContainerDisplay={isMobile ? 'block' : 'flex'}
-              isSvg={organization.logo?.contentType === 'image/svg+xml'}
-              tooltipText={props.serviceProviderTooltip}
-              backgroundColor={props.backgroundColor}
-              tooltipVariant={props.tooltipVariant ?? 'light'}
-            />
+            {props.img && (
+              <Box
+                alt=""
+                component="img"
+                src={props.img}
+                width={isMobile ? undefined : 'full'}
+                height={isMobile ? undefined : 'full'}
+                marginRight={isMobile ? 2 : 0}
+              />
+            )}
+            {props.serviceProviderSlug && organization?.link && (
+              <InstitutionPanel
+                loading={loading}
+                linkHref={organization.link ?? ''}
+                linkLabel={
+                  organization.title
+                    ? formatMessage(m.readMoreAbout, {
+                        arg: organization.title,
+                      })
+                    : ''
+                }
+                img={organization.logo?.url ?? ''}
+                imgContainerDisplay={isMobile ? 'block' : 'flex'}
+                isSvg={organization.logo?.contentType === 'image/svg+xml'}
+                tooltipText={props.serviceProviderTooltip}
+                backgroundColor={props.backgroundColor}
+                tooltipVariant={props.tooltipVariant ?? 'light'}
+              />
+            )}
           </GridColumn>
         )}
       </GridRow>

libs/portals/my-pages/health/src/components/InfoBox/InfoBox.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import {
+  IconProps,
+  Box,
+  Text,
+  Icon,
+  Divider,
+  Button,
+  Stack,
+} from '@island.is/island-ui/core'
+
+interface InfoBoxProps {
+  title: string
+  icon: Pick<IconProps, 'icon'>
+  button: {
+    action: () => void
+    label: string
+  }
+  children: React.ReactNode
+}
+
+const InfoBox: React.FC<InfoBoxProps> = ({ title, icon, children, button }) => {
+  return (
+    <Box
+      border="standard"
+      borderRadius="large"
+      borderColor="blue200"
+      padding={3}
+      width="half"
+      style={{ height: 'fit-content' }}
+    >
+      <Stack space={3}>
+        <Box
+          display="flex"
+          flexDirection="row"
+          justifyContent="flexStart"
+          alignItems="center"
+        >
+          <Icon
+            icon={icon.icon ?? 'business'}
+            color="blue400"
+            size="medium"
+            type="outline"
+          />
+          <Box marginLeft={2}>
+            <Text variant="h4" color="blue400">
+              {title}
+            </Text>
+          </Box>
+        </Box>
+        <Divider />
+        {children}
+        {button && (
+          <Box display="flex" justifyContent="center">
+            <Button variant="text" icon="arrowForward" size="small">
+              {button.label}
+            </Button>
+          </Box>
+        )}
+      </Stack>
+    </Box>
+  )
+}
+
+export default InfoBox

libs/portals/my-pages/health/src/components/InfoBox/InfoBoxItem.tsx

@@ -0,0 +1,34 @@
+import { Box, Divider, Text } from '@island.is/island-ui/core'
+import React from 'react'
+
+interface InfoBoxItemProps {
+  title: string
+  data: { label: string; content?: React.ReactNode }[]
+}
+
+const InfoBoxItem: React.FC<InfoBoxItemProps> = ({ title, data }) => {
+  return (
+    <Box>
+      <Text variant="h5" color="blue400">
+        {title}
+      </Text>
+      {data.map((item, index) => {
+        return (
+          <Box
+            key={index}
+            display="flex"
+            flexDirection="row"
+            justifyContent="spaceBetween"
+          >
+            <Text variant="small">{item.label}</Text>
+            <Box>{item.content}</Box>
+          </Box>
+        )
+      })}
+      <Box marginTop={3} />
+      <Divider />
+    </Box>
+  )
+}
+
+export default InfoBoxItem

libs/portals/my-pages/health/src/lib/messages.ts

@@ -193,10 +193,18 @@ export const messages = defineMessages({
     defaultMessage:
       'Ekki tókst að sækja gögn frá Sjúkratryggingum. Vinsamlegast reyndu aftur síðar.',
   },
+  myHealthOverview: {
+    id: 'sp.health:my-health-overview',
+    defaultMessage: 'Mitt heilsuyfirlit',
+  },
+  overviewTitle: {
+    id: 'sp.health:overview-title',
+    defaultMessage: 'Yfirlit',
+  },
   overviewIntro: {
     id: 'sp.health:overview-intro',
     defaultMessage:
-      'Hér fyrir neðan eru þín gögn sem hafa verið sótt frá þjóðskrá. Þú hefur kost á að gera breytingar á eftirfarandi upplýsingum ef þú kýst.',
+      'Hér getur þú séð yfirlit yfir grunnupplýsingar þínar í Heilsu, tímabókanir, skráningar, stöðu á listum og mælingar.',
   },
   hasHealthInsurance: {
     id: 'sp.health:has-health-insurance',
@@ -332,6 +340,10 @@ export const messages = defineMessages({
     id: 'sp.health:dentist-transfer-success-info',
     defaultMessage: 'Þú hefur verið skráður á tannlækninn {name}.',
   },
+  healthCenter: {
+    id: 'sp.health:health-center',
+    defaultMessage: 'Heilsugæsla',
+  },
   healthCenterTitle: {
     id: 'sp.health:health-center-title',
     defaultMessage: 'Skráð heilsugæsla',
@@ -411,10 +423,6 @@ export const messages = defineMessages({
     id: 'sp.health:physical-therapy',
     defaultMessage: 'Sjúkraþjálfun',
   },
-  overviewTitle: {
-    id: 'sp.health:overview-title',
-    defaultMessage: 'Yfirlit',
-  },
   speechTherapy: {
     id: 'sp.health:speech-therapy',
     defaultMessage: 'Talþjálfun',

libs/portals/my-pages/health/src/lib/navigation.ts

@@ -16,7 +16,7 @@ export const healthNavigation: PortalNavigationItem = {
       path: HealthPaths.HealthRoot,
     },
     {
-      name: messages.overviewTitle,
+      name: messages.myHealthOverview,
       path: HealthPaths.HealthOverview,
     },
     {

libs/portals/my-pages/health/src/screens/HealthOverview/HealthOverview.graphql

@@ -19,3 +19,27 @@ query getInsuranceConfirmation {
     data
   }
 }
+
+query getHealthCenter($input: RightsPortalHealthCenterHistoryInput) {
+  rightsPortalHealthCenterRegistrationHistory(input: $input) {
+    current {
+      healthCenterName
+    }
+  }
+}
+
+query getDentists($input: RightsPortalDentistBillsInput!) {
+  rightsPortalUserDentistRegistration(input: $input) {
+    dentist {
+      name
+    }
+  }
+}
+
+query getDonorStatus($locale: String) {
+  healthDirectorateOrganDonation(locale: $locale) {
+    donor {
+      isDonor
+    }
+  }
+}