feat(new-primary-school): Allergies and intolerances - Data implementation

libs/application/templates/new-primary-school/src/fields/FriggOptionsAsyncSelectField/index.tsx

@@ -0,0 +1,55 @@
+import { coreErrorMessages } from '@island.is/application/core'
+import {
+  FieldBaseProps,
+  FieldComponents,
+  FieldTypes,
+  FormText,
+} from '@island.is/application/types'
+import { AsyncSelectFormField } from '@island.is/application/ui-fields'
+import { useLocale } from '@island.is/localization'
+import React, { FC } from 'react'
+import { OptionsType } from '../../lib/constants'
+import { getOptionsListByType } from '../../lib/newPrimarySchoolUtils'
+
+type FriggOptionsAsyncSelectFieldProps = {
+  field: {
+    props: {
+      optionsType: OptionsType
+      placeholder: FormText
+    }
+  }
+}
+
+const FriggOptionsAsyncSelectField: FC<
+  React.PropsWithChildren<FieldBaseProps & FriggOptionsAsyncSelectFieldProps>
+> = ({ error, field, application }) => {
+  const { lang } = useLocale()
+  const { title, props } = field
+
+  return (
+    <AsyncSelectFormField
+      application={application}
+      error={error}
+      field={{
+        type: FieldTypes.ASYNC_SELECT,
+        component: FieldComponents.ASYNC_SELECT,
+        children: undefined,
+        id: field.id,
+        title,
+        placeholder: props.placeholder,
+        loadingError: coreErrorMessages.failedDataProvider,
+        loadOptions: async ({ apolloClient }) => {
+          return await getOptionsListByType(
+            apolloClient,
+            props.optionsType,
+            lang,
+          )
+        },
+        isMulti: true,
+        backgroundColor: 'blue',
+      }}
+    />
+  )
+}
+
+export default FriggOptionsAsyncSelectField

libs/application/templates/new-primary-school/src/fields/Review/review-groups/AllergiesAndIntolerances.tsx

@@ -2,11 +2,12 @@ import { YES } from '@island.is/application/core'
 import { DataValue, ReviewGroup } from '@island.is/application/ui-components'
 import { GridColumn, GridRow, Stack } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
+import { useFriggOptions } from '../../../hooks/useFriggOptions'
+import { OptionsType } from '../../../lib/constants'
 import { newPrimarySchoolMessages } from '../../../lib/messages'
 import {
   getApplicationAnswers,
-  getFoodAllergiesOptionsLabel,
-  getFoodIntolerancesOptionsLabel,
+  getSelectedOptionLabel,
 } from '../../../lib/newPrimarySchoolUtils'
 import { ReviewGroupProps } from './props'
 
@@ -24,6 +25,9 @@ export const AllergiesAndIntolerances = ({
     foodIntolerances,
   } = getApplicationAnswers(application.answers)
 
+  const foodAllergiesFriggOptions = useFriggOptions(OptionsType.ALLERGRY)
+  const foodIntolerancesFriggOptions = useFriggOptions(OptionsType.INTOLERANCE)
+
   return (
     <ReviewGroup
       isEditable={editable}
@@ -39,8 +43,9 @@ export const AllergiesAndIntolerances = ({
                 )}
                 value={foodAllergies
                   .map((allergies) => {
-                    return formatMessage(
-                      getFoodAllergiesOptionsLabel(allergies),
+                    return getSelectedOptionLabel(
+                      foodAllergiesFriggOptions,
+                      allergies,
                     )
                   })
                   .join(', ')}
@@ -57,8 +62,9 @@ export const AllergiesAndIntolerances = ({
                 )}
                 value={foodIntolerances
                   .map((intolerances) => {
-                    return formatMessage(
-                      getFoodIntolerancesOptionsLabel(intolerances),
+                    return getSelectedOptionLabel(
+                      foodIntolerancesFriggOptions,
+                      intolerances,
                     )
                   })
                   .join(', ')}

libs/application/templates/new-primary-school/src/fields/index.ts

@@ -1 +1,2 @@
+export { default as FriggOptionsAsyncSelectField } from './FriggOptionsAsyncSelectField'
 export { Review } from './Review'

libs/application/templates/new-primary-school/src/forms/NewPrimarySchoolForm/differentNeedsSection/allergiesAndIntolerancesSubSection.ts

@@ -1,18 +1,15 @@
 import {
   buildAlertMessageField,
-  buildAsyncSelectField,
   buildCheckboxField,
+  buildCustomField,
   buildDescriptionField,
   buildMultiField,
   buildSubSection,
 } from '@island.is/application/core'
 import { YES } from '@island.is/application/types'
+import { OptionsType } from '../../../lib/constants'
 import { newPrimarySchoolMessages } from '../../../lib/messages'
-import {
-  getApplicationAnswers,
-  getFoodAllergiesOptions,
-  getFoodIntolerancesOptions,
-} from '../../../lib/newPrimarySchoolUtils'
+import { getApplicationAnswers } from '../../../lib/newPrimarySchoolUtils'
 
 export const allergiesAndIntolerancesSubSection = buildSubSection({
   id: 'allergiesAndIntolerancesSubSection',
@@ -41,28 +38,25 @@ export const allergiesAndIntolerancesSubSection = buildSubSection({
             },
           ],
         }),
-        buildAsyncSelectField({
-          id: 'allergiesAndIntolerances.foodAllergies',
-          title: newPrimarySchoolMessages.differentNeeds.typeOfAllergies,
-          dataTestId: 'food-allergies',
-          placeholder:
-            newPrimarySchoolMessages.differentNeeds.typeOfAllergiesPlaceholder,
-          // TODO: Nota gögn fá Júní
-          loadOptions: async ({ apolloClient }) => {
-            /*  return await getOptionsListByType(
-              apolloClient,
-              OptionsType.ALLERGRY,
-            )*/
+        buildCustomField(
+          {
+            id: 'allergiesAndIntolerances.foodAllergies',
+            title: newPrimarySchoolMessages.differentNeeds.typeOfAllergies,
+            component: 'FriggOptionsAsyncSelectField',
+            dataTestId: 'food-allergies',
+            condition: (answers) => {
+              const { hasFoodAllergies } = getApplicationAnswers(answers)
 
-            return getFoodAllergiesOptions()
+              return hasFoodAllergies?.includes(YES)
+            },
           },
-          isMulti: true,
-          condition: (answers) => {
-            const { hasFoodAllergies } = getApplicationAnswers(answers)
-
-            return hasFoodAllergies?.includes(YES)
+          {
+            optionsType: OptionsType.ALLERGRY,
+            placeholder:
+              newPrimarySchoolMessages.differentNeeds
+                .typeOfAllergiesPlaceholder,
           },
-        }),
+        ),
         buildAlertMessageField({
           id: 'allergiesAndIntolerances.info',
           title: newPrimarySchoolMessages.shared.alertTitle,
@@ -91,29 +85,25 @@ export const allergiesAndIntolerancesSubSection = buildSubSection({
             },
           ],
         }),
-        buildAsyncSelectField({
-          id: 'allergiesAndIntolerances.foodIntolerances',
-          title: newPrimarySchoolMessages.differentNeeds.typeOfIntolerances,
-          dataTestId: 'food-intolerances',
-          placeholder:
-            newPrimarySchoolMessages.differentNeeds
-              .typeOfIntolerancesPlaceholder,
-          // TODO: Nota gögn fá Júní
-          loadOptions: async ({ apolloClient }) => {
-            /*return await getOptionsListByType(
-              apolloClient,
-              OptionsType.INTELERENCE,
-            )*/
+        buildCustomField(
+          {
+            id: 'allergiesAndIntolerances.foodIntolerances',
+            title: newPrimarySchoolMessages.differentNeeds.typeOfIntolerances,
+            component: 'FriggOptionsAsyncSelectField',
+            dataTestId: 'food-intolerances',
+            condition: (answers) => {
+              const { hasFoodIntolerances } = getApplicationAnswers(answers)
 
-            return getFoodIntolerancesOptions()
+              return hasFoodIntolerances?.includes(YES)
+            },
           },
-          isMulti: true,
-          condition: (answers) => {
-            const { hasFoodIntolerances } = getApplicationAnswers(answers)
-
-            return hasFoodIntolerances?.includes(YES)
+          {
+            optionsType: OptionsType.INTOLERANCE,
+            placeholder:
+              newPrimarySchoolMessages.differentNeeds
+                .typeOfIntolerancesPlaceholder,
           },
-        }),
+        ),
         buildDescriptionField({
           // Needed to add space
           id: 'allergiesAndIntolerances.divider',

libs/application/templates/new-primary-school/src/hooks/useFriggOptions.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@apollo/client'
+import { useLocale } from '@island.is/localization'
+import { friggOptionsQuery } from '../graphql/queries'
+import { OptionsType } from '../lib/constants'
+import { FriggOptionsQuery } from '../types/schema'
+
+export const useFriggOptions = (type?: OptionsType) => {
+  const { lang } = useLocale()
+  const { data } = useQuery<FriggOptionsQuery>(friggOptionsQuery, {
+    variables: {
+      type: {
+        type,
+      },
+    },
+  })
+
+  return (
+    data?.friggOptions?.flatMap(({ options }) =>
+      options.flatMap(({ value, key }) => {
+        const content = value.find(({ language }) => language === lang)?.content
+        return { value: key ?? '', label: content ?? '' }
+      }),
+    ) ?? []
+  )
+}

libs/application/templates/new-primary-school/src/lib/constants.ts

@@ -20,11 +20,6 @@ export enum Roles {
   APPLICANT = 'applicant',
 }
 
-export type Option = {
-  value: string
-  label: string
-}
-
 export enum RelationOptions {
   GRANDPARENT = 'grandparent',
   SIBLING = 'sibling',
@@ -52,22 +47,6 @@ export enum SiblingRelationOptions {
   STEP_SIBLING = 'stepSibling',
 }
 
-export enum FoodAllergiesOptions {
-  EGG_ALLERGY = 'eggAllergy',
-  FISH_ALLERGY = 'fishAllergy',
-  PENUT_ALLERGY = 'peanutAllergy',
-  WHEAT_ALLERGY = 'wheatAllergy',
-  MILK_ALLERGY = 'milkAllergy',
-  OTHER = 'other',
-}
-
-export enum FoodIntolerancesOptions {
-  LACTOSE_INTOLERANCE = 'lactoseIntolerance',
-  GLUTEN_INTOLERANCE = 'glutenIntolerance',
-  MSG_INTOLERANCE = 'msgIntolerance',
-  OTHER = 'other',
-}
-
 export enum Gender {
   FEMALE = 'FEMALE',
   MALE = 'MALE',

libs/application/templates/new-primary-school/src/lib/dataSchema.ts

@@ -3,12 +3,10 @@ import * as kennitala from 'kennitala'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import { z } from 'zod'
 import {
-  FoodAllergiesOptions,
-  FoodIntolerancesOptions,
+  Gender,
   ReasonForApplicationOptions,
   RelationOptions,
   SiblingRelationOptions,
-  Gender,
 } from './constants'
 import { errorMessages } from './messages'
 
@@ -160,10 +158,8 @@ export const dataSchema = z.object({
     .object({
       hasFoodAllergies: z.array(z.string()),
       hasFoodIntolerances: z.array(z.string()),
-      foodAllergies: z.array(z.nativeEnum(FoodAllergiesOptions)).optional(),
-      foodIntolerances: z
-        .array(z.nativeEnum(FoodIntolerancesOptions))
-        .optional(),
+      foodAllergies: z.array(z.string()).optional(),
+      foodIntolerances: z.array(z.string()).optional(),
       isUsingEpiPen: z.array(z.string()),
     })
     .refine(

libs/application/templates/new-primary-school/src/lib/messages.ts

@@ -606,51 +606,6 @@ export const newPrimarySchoolMessages: MessageDir = {
       defaultMessage: 'Notar adrenalínpenna',
       description: 'Uses epinephrine pen',
     },
-    eggAllergy: {
-      id: 'dess.nps.application:different.needs.egg.allergy',
-      defaultMessage: 'Eggjaofnæmi',
-      description: 'Egg allergy',
-    },
-    fishAllergy: {
-      id: 'dess.nps.application:different.needs.fish.allergy',
-      defaultMessage: 'Fiskiofnæmi',
-      description: 'Fish allergy',
-    },
-    nutAllergy: {
-      id: 'dess.nps.application:different.needs.nut.allergy',
-      defaultMessage: 'Hnetuofnæmi',
-      description: 'Nut allergy',
-    },
-    wheatAllergy: {
-      id: 'dess.nps.application:different.needs.wheat.allergy',
-      defaultMessage: 'Hveitiofnæmi',
-      description: 'Wheat allergy',
-    },
-    milkAllergy: {
-      id: 'dess.nps.application:different.needs.milk.allergy',
-      defaultMessage: 'Mjólkurofnæmi',
-      description: 'Milk allergy',
-    },
-    other: {
-      id: 'dess.nps.application:different.needs.other',
-      defaultMessage: 'Annað',
-      description: 'Other',
-    },
-    lactoseIntolerance: {
-      id: 'dess.nps.application:different.needs.lactose.intolerance',
-      defaultMessage: 'Mjólkursykuróþol',
-      description: 'Lactose intolerance',
-    },
-    glutenIntolerance: {
-      id: 'dess.nps.application:different.needs.gluten.intolerance',
-      defaultMessage: 'Glútenóþol',
-      description: 'Gluten intolerance',
-    },
-    msgIntolerance: {
-      id: 'dess.nps.application:different.needs.msg.intolerance',
-      defaultMessage: 'MSG-óþol',
-      description: 'MSG intolerance',
-    },
 
     // Support
     supportSubSectionTitle: {