feat(service-portal): move intro header to layout

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

@@ -6,6 +6,7 @@ import {
   GridColumn,
   BreadcrumbsDeprecated as Breadcrumbs,
   Button,
+  Text,
 } from '@island.is/island-ui/core'
 import {
   m,

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, isValidElement } from 'react'
 import {
   Box,
   Navigation,
@@ -11,6 +11,8 @@ import {
   ServicePortalNavigationItem,
   ModuleAlertBannerSection,
   GoBack,
+  FootNote,
+  IntroHeader,
 } from '@island.is/service-portal/core'
 import { useLocale } from '@island.is/localization'
 import { useWindowSize } from 'react-use'
@@ -20,6 +22,7 @@ import { Link as ReactLink } from 'react-router-dom'
 import { theme } from '@island.is/island-ui/theme'
 import * as styles from './Layout.css'
 import { PortalNavigationItem } from '@island.is/portals/core'
+import { MessageDescriptor } from 'react-intl'
 
 interface NarrowLayoutProps {
   activeParent?: PortalNavigationItem
@@ -71,6 +74,10 @@ export const NarrowLayout = ({
       return mapChildren(item)
     })
 
+  const activeItem = activeParent?.children?.find((c) =>
+    c.path ? pathname.includes(c.path) : undefined,
+  )
+
   return (
     <SidebarLayout
       isSticky={true}
@@ -145,7 +152,18 @@ export const NarrowLayout = ({
           </Box>
         )}
         <ModuleAlertBannerSection />
+        {activeItem && (
+          <IntroHeader
+            title={activeItem.name}
+            intro={activeItem.intro}
+            introComponent={activeItem.introComponent}
+            serviceProviderSlug={
+              activeItem.serviceProvider ?? activeParent?.serviceProvider
+            }
+          />
+        )}
         {children}
+        <FootNote serviceProviderSlug={activeParent?.serviceProvider} />
       </Box>
     </SidebarLayout>
   )

libs/portals/core/src/types/portalCore.ts

@@ -1,6 +1,6 @@
 import { ApolloClient, NormalizedCacheObject } from '@apollo/client'
 import { FormatMessage } from '@island.is/localization'
-import { FC } from 'react'
+import { FC, ReactElement, ReactNode } from 'react'
 import { MessageDescriptor } from 'react-intl'
 import { RouteObject } from 'react-router-dom'
 
@@ -49,6 +49,14 @@ export interface PortalNavigationItem {
    * Description for module
    */
   description?: MessageDescriptor
+  /**
+   * text for the intro header for module
+   */
+  intro?: MessageDescriptor
+  /**
+   * jsx element for the intro header for module
+   */
+  introComponent?: ReactNode
   /**
    * Active state for navigation item
    */

libs/service-portal/core/src/lib/messages.ts

@@ -1476,6 +1476,11 @@ export const m = defineMessages({
     defaultMessage:
       'Ellilífeyrir, örorkulífeyrir, endurhæfingarlífeyrir og tengdar greiðslur eru tekjutengdar og reiknast út frá tekjuáætlun. Þegar sótt er um lífeyri þarf alltaf að skila inn tekjuáætlun. Hér er hægt að skoða gildandi tekjuáætlun.',
   },
+  incomePlanDetail: {
+    id: 'service.portal:income-plan-detail',
+    defaultMessage:
+      'Hér fyrir neðan er yfirlit yfir þá tekjuáætlun sem er í gildi. Ef þú óskar eftir því að breyta henni þarftu að velja ‘breyta tekjuáætlun’.',
+  },
   paymentPlan: {
     id: 'service.portal:payment-plan',
     defaultMessage: 'Greiðsluáætlun',

libs/service-portal/health/src/lib/navigation.ts

@@ -5,22 +5,22 @@ import { HealthPaths } from './paths'
 
 export const healthNavigation: PortalNavigationItem = {
   name: m.health,
+  description: m.healthDescription,
+  serviceProvider: 'sjukratryggingar',
+  serviceProviderTooltip: messages.healthTooltip,
   path: HealthPaths.HealthRoot,
   icon: {
     icon: 'heart',
   },
   children: [
-    {
-      name: m.health,
-      navHide: true,
-      path: HealthPaths.HealthRoot,
-    },
     {
       name: messages.overviewTitle,
+      intro: messages.overviewIntro,
       path: HealthPaths.HealthOverview,
     },
     {
       name: m.therapies,
+      intro: messages.therapyDescription,
       path: HealthPaths.HealthTherapies,
       children: [
         {
@@ -42,6 +42,7 @@ export const healthNavigation: PortalNavigationItem = {
     },
     {
       name: m.payments,
+      intro: messages.paymentsIntro,
       path: HealthPaths.HealthPayments,
       children: [
         {
@@ -58,32 +59,38 @@ export const healthNavigation: PortalNavigationItem = {
     },
     {
       name: m.aidsAndNutrition,
+      intro: messages.aidsAndNutritionDescription,
       path: HealthPaths.HealthAidsAndNutrition,
     },
     {
       name: m.dentists,
+      intro: messages.dentistsDescription,
       path: HealthPaths.HealthDentists,
       children: [
         {
           name: messages.dentistRegisterationPageTitle,
+          intro: messages.dentistRegisterationPageDescription,
           path: HealthPaths.HealthDentistRegistration,
           navHide: true,
         },
       ],
     },
     {
       name: m.healthCenter,
+      intro: messages.healthCenterDescription,
       path: HealthPaths.HealthCenter,
       children: [
         {
           name: messages.healthCenterRegistrationTitle,
+          intro: messages.healthCenterRegistrationInfo,
           path: HealthPaths.HealthCenterRegistration,
           navHide: true,
         },
       ],
     },
     {
       name: messages.medicineTitle,
+      intro: messages.medicineTitleIntro,
       path: HealthPaths.HealthMedicine,
       children: [
         {
@@ -115,6 +122,9 @@ export const healthNavigation: PortalNavigationItem = {
     },
     {
       name: messages.vaccinations,
+      intro: messages.vaccinationsIntro,
+      serviceProvider: 'landlaeknir',
+      serviceProviderTooltip: messages.landlaeknirVaccinationsTooltip,
       path: HealthPaths.HealthVaccinations,
       children: [
         {
@@ -131,6 +141,7 @@ export const healthNavigation: PortalNavigationItem = {
     },
     {
       name: messages.organDonation,
+      intro: messages.organDonationDescription,
       path: HealthPaths.HealthOrganDonation,
       children: [
         {
@@ -141,5 +152,4 @@ export const healthNavigation: PortalNavigationItem = {
       ],
     },
   ],
-  description: m.healthDescription,
 }

libs/service-portal/health/src/screens/AidsAndNutrition/AidsAndNutrition.tsx

@@ -48,13 +48,6 @@ const AidsAndNutrition = () => {
 
   return (
     <Box marginBottom={[6, 6, 10]}>
-      <IntroHeader
-        title={formatMessage(messages.aidsAndNutritionTitle)}
-        intro={formatMessage(messages.aidsAndNutritionDescription)}
-        serviceProviderSlug={SJUKRATRYGGINGAR_SLUG}
-        serviceProviderTooltip={formatMessage(messages.healthTooltip)}
-      />
-
       {error && <Problem error={error} noBorder={false} />}
 
       {loading && !error && (

libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx

@@ -132,10 +132,6 @@ export const DentistRegistration = () => {
 
   return (
     <Box paddingY={2}>
-      <IntroHeader
-        title={formatMessage(messages.dentistRegisterationPageTitle)}
-        intro={formatMessage(messages.dentistRegisterationPageDescription)}
-      />
       {errorTransfering && (
         <Box paddingBottom={4} ref={errorBoxRef}>
           <AlertMessage

libs/service-portal/health/src/screens/Dentists/Dentists.tsx

@@ -63,12 +63,6 @@ const Dentists = () => {
 
   return (
     <Box marginBottom={[6, 6, 10]}>
-      <IntroHeader
-        title={formatMessage(messages.dentistsTitle)}
-        intro={formatMessage(messages.dentistsDescription)}
-        serviceProviderSlug={SJUKRATRYGGINGAR_SLUG}
-        serviceProviderTooltip={formatMessage(messages.healthTooltip)}
-      />
       {error && !loading && <Problem error={error} noBorder={false} />}
 
       {!error && !loading && !dentist && (

libs/service-portal/health/src/screens/HealthCenter/HealthCenter.tsx

@@ -63,13 +63,6 @@ const HealthCenter = () => {
 
   return (
     <Box marginBottom={[6, 6, 10]}>
-      <IntroHeader
-        title={formatMessage(messages.healthCenterTitle)}
-        intro={formatMessage(messages.healthCenterDescription)}
-        serviceProviderSlug={SJUKRATRYGGINGAR_SLUG}
-        serviceProviderTooltip={formatMessage(messages.healthTooltip)}
-      />
-
       {wasSuccessfulTransfer && !loading && (
         <Box width="full" marginTop={4}>
           <AlertMessage

libs/service-portal/health/src/screens/HealthOverview/HealthOverview.tsx

@@ -90,14 +90,6 @@ export const HealthOverview = () => {
 
   return (
     <Box>
-      <Box marginBottom={CONTENT_GAP_LG}>
-        <IntroHeader
-          title={formatMessage(user.profile.name)}
-          intro={formatMessage(messages.overviewIntro)}
-          serviceProviderSlug={SJUKRATRYGGINGAR_SLUG}
-          serviceProviderTooltip={formatMessage(messages.healthTooltip)}
-        />
-      </Box>
       {error ? (
         <Problem error={error} noBorder={false} />
       ) : loading ? (

libs/service-portal/health/src/screens/Medicine/wrapper/MedicineWrapper.tsx

@@ -20,13 +20,6 @@ export const MedicineWrapper = ({
 
   return (
     <Box>
-      <IntroHeader
-        title={formatMessage(m.medicineTitle)}
-        intro={formatMessage(m.medicineTitleIntro)}
-        serviceProviderSlug={SJUKRATRYGGINGAR_SLUG}
-        serviceProviderTooltip={formatMessage(m.healthTooltip)}
-      />
-
       <Hidden print={true}>
         <TabNavigation
           label={formatMessage(m.medicineTitle)}

libs/service-portal/health/src/screens/OrganDonation/OrganDonation.tsx

@@ -32,10 +32,6 @@ const OrganDonation = () => {
 
   return (
     <Box>
-      <IntroHeader
-        title={formatMessage(m.organDonation)}
-        intro={formatMessage(m.organDonationDescription)}
-      />
       <Box marginBottom={6}>
         <LinkResolver
           href={formatMessage(m.organDonationLink)}

libs/service-portal/health/src/screens/Payments/wrapper/PaymentsWrapper.tsx

@@ -20,15 +20,6 @@ export const PaymentsWrapper = ({ children, pathname }: Props) => {
 
   return (
     <Box>
-      <Box marginBottom={5}>
-        <IntroHeader
-          title={formatMessage(messages.payments)}
-          intro={formatMessage(messages.paymentsIntro)}
-          serviceProviderSlug={SJUKRATRYGGINGAR_SLUG}
-          serviceProviderTooltip={formatMessage(messages.healthTooltip)}
-        />
-      </Box>
-
       <TabNavigation
         label={formatMessage(messages.payments)}
         pathname={pathname}

libs/service-portal/health/src/screens/Therapies/wrapper/TherapiesWrapper.tsx

@@ -30,12 +30,6 @@ export const TherapiesWrapper = ({
 
   return (
     <Box marginBottom={[6, 6, 10]}>
-      <IntroHeader
-        title={formatMessage(messages.therapyTitle)}
-        intro={formatMessage(messages.therapyDescription)}
-        serviceProviderSlug={SJUKRATRYGGINGAR_SLUG}
-        serviceProviderTooltip={formatMessage(messages.healthTooltip)}
-      />
       <TabNavigation
         label={formatMessage(messages.therapyTitle)}
         pathname={pathname}

libs/service-portal/health/src/screens/Vaccinations/VaccinationsWrapper.tsx

@@ -36,12 +36,6 @@ export const VaccinationsWrapper = () => {
 
   return (
     <Box>
-      <IntroHeader
-        title={formatMessage(m.vaccinations)}
-        intro={formatMessage(m.vaccinationsIntro)}
-        serviceProviderSlug={HEALTH_DIRECTORATE_SLUG}
-        serviceProviderTooltip={formatMessage(m.landlaeknirVaccinationsTooltip)}
-      />
       {/* Buttons */}
       <Box printHidden display="flex" flexDirection="row" marginBottom={6}>
         <LinkButton

libs/service-portal/social-insurance-maintenance/src/lib/navigation.ts

@@ -5,13 +5,16 @@ import { SocialInsuranceMaintenancePaths } from './paths'
 export const socialInsuranceMaintenanceNavigation: PortalNavigationItem = {
   name: m.socialInsuranceMaintenance,
   description: m.socialInsuranceMaintenanceIntro,
+  serviceProvider: 'tryggingastofnun',
+  serviceProviderTooltip: m.socialInsuranceTooltip,
   path: SocialInsuranceMaintenancePaths.SocialInsuranceMaintenanceRoot,
   icon: {
     icon: 'cardWithCheckmark',
   },
   children: [
     {
       name: m.paymentPlan,
+      intro: m.socialInsuranceMaintenanceDescription,
       path: SocialInsuranceMaintenancePaths.SocialInsuranceMaintenancePaymentPlan,
       children: [
         {
@@ -29,10 +32,12 @@ export const socialInsuranceMaintenanceNavigation: PortalNavigationItem = {
     },
     {
       name: m.incomePlan,
+      intro: m.incomePlanDescription,
       path: SocialInsuranceMaintenancePaths.SocialInsuranceMaintenanceIncomePlan,
       children: [
         {
           name: m.latestIncomePlan,
+          intro: m.incomePlanDetail,
           path: SocialInsuranceMaintenancePaths.SocialInsuranceMaintenanceIncomePlanDetail,
           navHide: true,
         },

libs/service-portal/social-insurance-maintenance/src/screens/IncomePlan/IncomePlan.tsx

@@ -76,14 +76,14 @@ const IncomePlan = () => {
 
   return (
     <Box>
-      <IntroHeader
+      {/*<IntroHeader
         title={formatMessage(coreMessages.incomePlan)}
         intro={formatMessage(coreMessages.incomePlanDescription)}
         serviceProviderSlug={'tryggingastofnun'}
         serviceProviderTooltip={formatMessage(
           coreMessages.socialInsuranceTooltip,
         )}
-      />
+      />*/}
 
       {error && !loading ? (
         <Problem error={error} noBorder={false} />
@@ -183,7 +183,9 @@ const IncomePlan = () => {
           )}
         </Stack>
       )}
-      <FootNote serviceProviderSlug="tryggingastofnun" />
+      {/*<Hidden print>
+          <FootNote serviceProviderSlug="tryggingastofnun" />
+        </Hidden>*/}
     </Box>
   )
 }