feat(service-portal): Health - Organ donation

libs/auth/scopes/src/lib/api.scope.ts

@@ -23,6 +23,7 @@ export enum ApiScope {
   intellectualProperties = '@island.is/assets/ip',
   healthDentists = '@island.is/health/dentists',
   healthRightsStatus = '@island.is/health/rights-status',
+  healthOrganDonation = '@island.is/health/organ-donation',
   workMachines = '@island.is/work-machines',
   vinnueftirlitid = '@island.is/applications/ver',
   samgongustofaVehicles = '@island.is/applications/samgongustofa-vehicles',

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

@@ -1555,4 +1555,8 @@ export const m = defineMessages({
     id: 'service.portal:read-more-about',
     defaultMessage: 'Lesa meira um {arg}',
   },
+  submit: {
+    id: 'service.portal:submit',
+    defaultMessage: 'Staðfesta',
+  },
 })

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

@@ -944,4 +944,54 @@ export const messages = defineMessages({
     id: 'sp.health:medicine-calculator-add-to-purchase-label',
     defaultMessage: 'Bæta {arg} við lyfjakaupalista',
   },
+  organDonation: {
+    id: 'sp.health:organ-donation',
+    defaultMessage: 'Líffæragjöf',
+  },
+  organDonationDescription: {
+    id: 'sp.health:organ-donation-description',
+    defaultMessage:
+      'Íslendingar eru sjálfkrafa skráðir líffæragjafar. Þau sem vilja geta breytt afstöðu sinni.',
+  },
+  readAboutOrganDonation: {
+    id: 'sp.health:read-about-organ-donation',
+    defaultMessage: 'Lesa um líffæragjöf',
+  },
+  takeOnOrganDonation: {
+    id: 'sp.health:take-on-organ-donation',
+    defaultMessage: 'Afstaða til líffæragjafar',
+  },
+  changeTake: {
+    id: 'sp.health:change-take',
+    defaultMessage: 'Breyta afstöðu',
+  },
+  organDonationLink: {
+    id: 'sp.health:organ-donation-link',
+    defaultMessage: 'https://island.is/liffaeragjof',
+  },
+  organRegistrationOtherLabel: {
+    id: 'sp.health:organ-registration-other-label',
+    defaultMessage: 'Skrifaðu hér',
+  },
+  organRegistrationOtherText: {
+    id: 'sp.health:organ-registration-other-text',
+    defaultMessage: 'Vinsamlegast skráðu hvaða líffæri hér',
+  },
+  organLimitationsError: {
+    id: 'sp.health:organ-limitations-error',
+    defaultMessage:
+      'Textareitur má ekki vera tómur sé þessi valkostur valinn. ',
+  },
+  other: {
+    id: 'sp.health:other-lower-case',
+    defaultMessage: 'annað',
+  },
+  registrationComplete: {
+    id: 'sp.health:registration-complete',
+    defaultMessage: 'Skráning tókst',
+  },
+  registrationFailed: {
+    id: 'sp.health:registration-failed',
+    defaultMessage: 'Skráning mistókst',
+  },
 })

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

@@ -113,6 +113,17 @@ export const healthNavigation: PortalNavigationItem = {
         },
       ],
     },
+    {
+      name: messages.organDonation,
+      path: HealthPaths.HealthOrganDonation,
+      children: [
+        {
+          name: messages.changeRegistration,
+          path: HealthPaths.HealthOrganDonationRegistration,
+          navHide: true,
+        },
+      ],
+    },
   ],
   description: m.healthDescription,
 }

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

@@ -3,6 +3,9 @@ export enum HealthPaths {
 
   HealthOverview = '/heilsa/yfirlit',
 
+  HealthOrganDonation = '/heilsa/liffaeragjof',
+  HealthOrganDonationRegistration = '/heilsa/liffaeragjof/skraning',
+
   HealthTherapies = '/heilsa/thjalfun',
   HealthTherapiesPhysical = '/heilsa/thjalfun/sjukrathjalfun',
   HealthTherapiesSpeech = '/heilsa/thjalfun/talthjalfun',

libs/service-portal/health/src/module.tsx

@@ -54,6 +54,14 @@ const PaymentParticipation = lazy(() =>
 )
 const PaymentOverview = lazy(() => import('./screens/Payments/PaymentOverview'))
 
+const OrganDonation = lazy(() =>
+  import('./screens/OrganDonation/OrganDonation'),
+)
+
+const OrganDonationRegistration = lazy(() =>
+  import('./screens/OrganDonationRegistration/RegistrationForm'),
+)
+
 export const healthModule: PortalModule = {
   name: 'Heilsa',
   enabled: ({ isCompany }) => !isCompany,
@@ -189,5 +197,19 @@ export const healthModule: PortalModule = {
       enabled: userInfo.scopes.includes(ApiScope.healthDentists),
       element: <DentistRegistration />,
     },
+    {
+      name: hm.organDonation,
+      path: HealthPaths.HealthOrganDonation,
+      key: 'HealthOrganDonation',
+      enabled: userInfo.scopes.includes(ApiScope.healthOrganDonation), // TODO: Change to correct scope!
+      element: <OrganDonation />,
+    },
+    {
+      name: hm.organDonation,
+      path: HealthPaths.HealthOrganDonationRegistration,
+      key: 'HealthOrganDonation',
+      enabled: userInfo.scopes.includes(ApiScope.healthOrganDonation), // TODO: Change to correct scope!
+      element: <OrganDonationRegistration />,
+    },
   ],
 }

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

@@ -0,0 +1,70 @@
+import { useLocale, useNamespaces } from '@island.is/localization'
+import { getOrganDonor } from '../../utils/OrganDonationMock'
+import {
+  ActionCard,
+  IntroHeader,
+  LinkResolver,
+} from '@island.is/service-portal/core'
+import { messages as m } from '../../lib/messages'
+import { Button, Box, Text } from '@island.is/island-ui/core'
+import { HealthPaths } from '../../lib/paths'
+import { Problem } from '@island.is/react-spa/shared'
+const OrganDonation = () => {
+  useNamespaces('sp.health')
+
+  const { formatMessage, lang } = useLocale()
+  const { data, loading, error } = getOrganDonor(lang)
+
+  return (
+    <Box>
+      <IntroHeader
+        title={formatMessage(m.organDonation)}
+        intro={formatMessage(m.organDonationDescription)}
+      />
+      {!error && !loading && data.data !== null && (
+        <>
+          <Box>
+            <LinkResolver
+              href={formatMessage(m.organDonationLink)}
+              key="organ-donation"
+            >
+              <Button
+                variant="utility"
+                size="small"
+                icon="open"
+                iconType="outline"
+              >
+                {formatMessage(m.readAboutOrganDonation)}
+              </Button>
+            </LinkResolver>
+          </Box>
+          <Box>
+            <Text
+              variant="eyebrow"
+              color="purple400"
+              marginTop={5}
+              marginBottom={1}
+            >
+              {formatMessage(m.takeOnOrganDonation)}
+            </Text>
+            <ActionCard
+              heading={data.data.title}
+              text={data.data.description}
+              cta={{
+                url: HealthPaths.HealthOrganDonationRegistration,
+                label: formatMessage(m.changeTake),
+                centered: true,
+              }}
+            />
+          </Box>
+        </>
+      )}
+      {error && !loading && <Problem error={undefined} noBorder={false} />}
+      {!error && !loading && data === null && (
+        <Problem type="no_data" noBorder={false} />
+      )}
+    </Box>
+  )
+}
+
+export default OrganDonation

libs/service-portal/health/src/screens/OrganDonationRegistration/Limitations.tsx

@@ -0,0 +1,87 @@
+import {
+  Box,
+  Checkbox,
+  Divider,
+  GridColumn,
+  GridContainer,
+  GridRow,
+  Input,
+  Stack,
+} from '@island.is/island-ui/core'
+import React, { useState } from 'react'
+import { OptionsLimitations } from '../../utils/OrganDonationMock'
+import { messages } from '../..'
+import { useLocale, useNamespaces } from '@island.is/localization'
+
+interface LimitationsProps {
+  data: OptionsLimitations[]
+}
+
+const Limitations = ({ data }: LimitationsProps) => {
+  useNamespaces('sp.health')
+  const { formatMessage } = useLocale()
+  const [checked, setChecked] = useState<Array<string>>([])
+
+  const handleCheckboxChange = (id: string, isChecked: boolean) => {
+    setChecked((prevState) =>
+      isChecked ? [...prevState, id] : prevState.filter((item) => item !== id),
+    )
+  }
+
+  const input = data.find((x) => x.type === 'input')
+
+  return (
+    <Box marginTop={2} position="relative">
+      <Stack space={2}>
+        <Divider />
+        <Box display="flex" flexDirection="row" flexWrap="wrap" width="full">
+          {data?.map(
+            (y, yi) =>
+              y.type === 'checkbox' && (
+                <Box
+                  key={`organ-donation-limitation-${yi}`}
+                  width="half"
+                  marginY="smallGutter"
+                >
+                  <Checkbox
+                    id={`organ-registration-form-${y.value.toLowerCase()}`}
+                    name={`selected-limitations-${y.value.toLowerCase()}`}
+                    label={y.value}
+                    value={y.value.toLowerCase()}
+                    onChange={(e) =>
+                      handleCheckboxChange(
+                        y.value.toLowerCase(),
+                        e.target.checked,
+                      )
+                    }
+                  />
+                </Box>
+              ),
+          )}
+        </Box>
+      </Stack>
+      {input && checked.includes(input.value.toLowerCase()) && (
+        <GridContainer>
+          <GridRow>
+            <GridColumn span={['7/7', '5/7']}>
+              <Box marginY="gutter">
+                <Input
+                  id="organ-donation-limitation"
+                  name="otherLimitatons"
+                  textarea
+                  label={formatMessage(messages.organRegistrationOtherLabel)}
+                  placeholder={formatMessage(
+                    messages.organRegistrationOtherText,
+                  )}
+                  maxLength={220}
+                />
+              </Box>
+            </GridColumn>
+          </GridRow>
+        </GridContainer>
+      )}
+    </Box>
+  )
+}
+
+export default Limitations

libs/service-portal/health/src/screens/OrganDonationRegistration/OrganDonationRegistration.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css'
+import { theme } from '@island.is/island-ui/theme'
+
+export const buttonContainer = style({
+  gap: theme.spacing[2],
+})