feat(new-primary-school): Implement language page

libs/application/template-api-modules/src/lib/modules/templates/new-primary-school/new-primary-school.utils.ts

@@ -24,10 +24,14 @@ export const transformApplicationToNewPrimarySchoolDTO = (
     reasonForApplicationStreetAddress,
     reasonForApplicationPostalCode,
     selectedSchool,
-    nativeLanguage,
-    otherLanguagesSpokenDaily,
-    otherLanguages,
-    icelandicNotSpokenAroundChild,
+    language1,
+    language2,
+    language3,
+    language4,
+    childLanguage,
+    languageEnvironment,
+    signLanguage,
+    interpreter,
     developmentalAssessment,
     specialSupport,
     startDate,
@@ -79,17 +83,6 @@ export const transformApplicationToNewPrimarySchoolDTO = (
       : []),
   ]
 
-  let noIcelandic: boolean
-  if (otherLanguagesSpokenDaily === YES) {
-    if (nativeLanguage === 'is' || otherLanguages?.includes('is')) {
-      noIcelandic = false
-    } else {
-      noIcelandic = icelandicNotSpokenAroundChild?.includes(YES)
-    }
-  } else {
-    noIcelandic = nativeLanguage !== 'is'
-  }
-
   const newPrimarySchoolDTO: FormDto = {
     type: FormDtoTypeEnum.Registration,
     user: {
@@ -138,12 +131,11 @@ export const transformApplicationToNewPrimarySchoolDTO = (
           social: {
             hasHadSupport: specialSupport === YES,
             hasDiagnoses: developmentalAssessment === YES,
-          },
+          }, // Languages needs to be updated when Juni is ready with the data struccture
           language: {
-            nativeLanguage: nativeLanguage,
-            noIcelandic,
-            otherLanguages:
-              otherLanguagesSpokenDaily === YES ? otherLanguages : undefined,
+            nativeLanguage: '',
+            noIcelandic: false,
+            otherLanguages: undefined,
           },
         }
       : {}),

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

@@ -0,0 +1,152 @@
+import { FieldBaseProps } from '@island.is/application/types'
+import React, { FC, useEffect, useState } from 'react'
+
+import { Box, Button, Stack, Text } from '@island.is/island-ui/core'
+import { useLocale } from '@island.is/localization'
+import { SelectController } from '@island.is/shared/form-fields'
+import { getAllLanguageCodes } from '@island.is/shared/utils'
+import { newPrimarySchoolMessages } from '../../lib/messages'
+import { getApplicationAnswers } from '../../lib/newPrimarySchoolUtils'
+
+const languagesIds = {
+  language1: 'languages.language1',
+  language2: 'languages.language2',
+  language3: 'languages.language3',
+  language4: 'languages.language4',
+  childLanguage: 'languages.childLanguage',
+}
+
+const LanguageSelection: FC<React.PropsWithChildren<FieldBaseProps>> = ({
+  application,
+}) => {
+  const { formatMessage } = useLocale()
+
+  const [visibleLanguagesCount, setVisibleLanguagesCount] = useState(1)
+  const [selectedLanguages, setSelectedLanguages] = useState<string[]>([
+    '',
+    '',
+    '',
+    '',
+  ])
+
+  const allLanguages = getAllLanguageCodes()
+  const allLanguageOptions = allLanguages.map((language) => ({
+    label: language.name,
+    value: language.code,
+  }))
+
+  const languageIdsArray = [
+    languagesIds.language1,
+    languagesIds.language2,
+    languagesIds.language3,
+    languagesIds.language4,
+  ]
+
+  const addLanguage = () => {
+    setVisibleLanguagesCount((prev) => Math.min(prev + 1, 4))
+  }
+
+  /**
+   * Hide child language if there is no language selected
+   * @returns
+   */
+  const hideChildLanguage = () => {
+    return selectedLanguages.filter((language) => language !== '').length <= 1
+  }
+
+  useEffect(() => {
+    const { language1, language2, language3, language4 } =
+      getApplicationAnswers(application.answers)
+    const selected: string[] = []
+    let visibleCount = 1
+    if (language1) {
+      selected.push(language1)
+      visibleCount = 1
+    }
+    if (language2) {
+      selected.push(language2)
+      visibleCount = 2
+    }
+    if (language3) {
+      selected.push(language3)
+      visibleCount = 3
+    }
+    if (language4) {
+      selected.push(language4)
+      visibleCount = 4
+    }
+
+    setSelectedLanguages(selected)
+    setVisibleLanguagesCount(visibleCount)
+  }, [application, getApplicationAnswers])
+
+  return (
+    <Stack space={2}>
+      {languageIdsArray.slice(0, visibleLanguagesCount).map((id, index) => (
+        <SelectController
+          key={languageIdsArray[index]}
+          label={formatMessage(
+            newPrimarySchoolMessages.differentNeeds.languageSelectionTitle,
+            { no: `${index + 1}` },
+          )}
+          aria-label={formatMessage(
+            newPrimarySchoolMessages.differentNeeds.languageSelectionAriaLabel,
+            { no: `${index + 1}` },
+          )}
+          placeholder={formatMessage(
+            newPrimarySchoolMessages.differentNeeds
+              .languageSelectionPlaceholder,
+          )}
+          id={languageIdsArray[index]}
+          name={languageIdsArray[index]}
+          backgroundColor="blue"
+          options={allLanguageOptions}
+          onSelect={(value) => {
+            setSelectedLanguages((prevLanguages) => {
+              const newLanguages = [...prevLanguages]
+              newLanguages[index] = value.value
+              return newLanguages
+            })
+          }}
+        />
+      ))}
+      <Box textAlign={'right'} width="full">
+        <Button
+          icon="add"
+          variant="text"
+          size="small"
+          onClick={addLanguage}
+          disabled={visibleLanguagesCount >= 4}
+        >
+          {formatMessage(
+            newPrimarySchoolMessages.differentNeeds.addLanguageButton,
+          )}
+        </Button>
+      </Box>
+      <Box hidden={hideChildLanguage()}>
+        <Text variant="h4" marginTop={3} marginBottom="gutter">
+          {formatMessage(
+            newPrimarySchoolMessages.differentNeeds.childLanguageTitle,
+          )}
+        </Text>
+        <SelectController
+          key={languagesIds.childLanguage}
+          label={formatMessage(
+            newPrimarySchoolMessages.differentNeeds.languageSubSectionTitle,
+          )}
+          placeholder={formatMessage(
+            newPrimarySchoolMessages.differentNeeds
+              .languageSelectionPlaceholder,
+          )}
+          id={languagesIds.childLanguage}
+          name={languagesIds.childLanguage}
+          backgroundColor="blue"
+          options={allLanguageOptions.filter((language) =>
+            selectedLanguages.includes(language.value),
+          )}
+        />
+      </Box>
+    </Stack>
+  )
+}
+export default LanguageSelection

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

@@ -1,4 +1,3 @@
-import { YES } from '@island.is/application/types'
 import {
   DataValue,
   RadioValue,
@@ -7,8 +6,12 @@ import {
 import { GridColumn, GridRow, Stack } from '@island.is/island-ui/core'
 import { useLocale } from '@island.is/localization'
 import { getLanguageByCode } from '@island.is/shared/utils'
+import { LanguageEnvironmentOptions } from '../../../lib/constants'
 import { newPrimarySchoolMessages } from '../../../lib/messages'
-import { getApplicationAnswers } from '../../../lib/newPrimarySchoolUtils'
+import {
+  getApplicationAnswers,
+  getLanguageEnvironments,
+} from '../../../lib/newPrimarySchoolUtils'
 import { ReviewGroupProps } from './props'
 
 export const Languages = ({
@@ -18,14 +21,19 @@ export const Languages = ({
 }: ReviewGroupProps) => {
   const { formatMessage } = useLocale()
   const {
-    nativeLanguage,
-    otherLanguagesSpokenDaily,
-    otherLanguages,
-    icelandicNotSpokenAroundChild,
+    interpreter,
+    languageEnvironment,
+    language1,
+    language2,
+    language3,
+    language4,
+    childLanguage,
+    signLanguage,
   } = getApplicationAnswers(application.answers)
 
-  const icelandicSelected =
-    nativeLanguage === 'is' || otherLanguages?.includes('is')
+  const selectedLanguageEnvironment = getLanguageEnvironments().find(
+    (env) => env.value === languageEnvironment,
+  )
 
   return (
     <ReviewGroup
@@ -37,53 +45,100 @@ export const Languages = ({
           <GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
             <DataValue
               label={formatMessage(
-                newPrimarySchoolMessages.overview.nativeLanguage,
-              )}
-              value={getLanguageByCode(nativeLanguage)?.name}
-            />
-          </GridColumn>
-        </GridRow>
-        <GridRow>
-          <GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
-            <RadioValue
-              label={formatMessage(
-                newPrimarySchoolMessages.differentNeeds
-                  .otherLanguagesSpokenDaily,
+                newPrimarySchoolMessages.overview.languageEnvironment,
               )}
-              value={otherLanguagesSpokenDaily}
+              value={formatMessage(selectedLanguageEnvironment?.label || '')}
             />
           </GridColumn>
         </GridRow>
-        {otherLanguagesSpokenDaily === YES && (
+
+        {languageEnvironment === LanguageEnvironmentOptions.ONLY_ICELANDIC ? (
+          <GridRow>
+            <GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
+              <RadioValue
+                label={formatMessage(
+                  newPrimarySchoolMessages.differentNeeds.signLanguage,
+                )}
+                value={signLanguage}
+              />
+            </GridColumn>
+          </GridRow>
+        ) : (
           <>
+            <GridRow>
+              <GridColumn span={['12/12', '6/12', '6/12', '6/12']}>
+                <DataValue
+                  label={formatMessage(
+                    newPrimarySchoolMessages.differentNeeds
+                      .languageSelectionTitle,
+                    { no: `${1}` },
+                  )}
+                  value={getLanguageByCode(language1)?.name}
+                />
+              </GridColumn>
+              <GridColumn span={['12/12', '6/12', '6/12', '6/12']}>
+                <DataValue
+                  label={formatMessage(
+                    newPrimarySchoolMessages.differentNeeds
+                      .languageSelectionTitle,
+                    { no: `${2}` },
+                  )}
+                  value={getLanguageByCode(language2)?.name}
+                />
+              </GridColumn>
+            </GridRow>
+            <GridRow>
+              <GridColumn span={['12/12', '6/12', '6/12', '6/12']}>
+                <DataValue
+                  label={formatMessage(
+                    newPrimarySchoolMessages.differentNeeds
+                      .languageSelectionTitle,
+                    { no: `${3}` },
+                  )}
+                  value={getLanguageByCode(language3)?.name}
+                />
+              </GridColumn>
+              <GridColumn span={['12/12', '6/12', '6/12', '6/12']}>
+                <DataValue
+                  label={formatMessage(
+                    newPrimarySchoolMessages.differentNeeds
+                      .languageSelectionTitle,
+                    { no: `${4}` },
+                  )}
+                  value={getLanguageByCode(language4)?.name}
+                />
+              </GridColumn>
+            </GridRow>
             <GridRow>
               <GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
                 <DataValue
                   label={formatMessage(
-                    newPrimarySchoolMessages.differentNeeds.languageTitle,
+                    newPrimarySchoolMessages.overview.childLanguage,
                   )}
-                  value={otherLanguages
-                    .map((language) => {
-                      return getLanguageByCode(language)?.name
-                    })
-                    .join(', ')}
+                  value={getLanguageByCode(childLanguage)?.name}
+                />
+              </GridColumn>
+            </GridRow>
+
+            <GridRow>
+              <GridColumn span={['12/12', '6/12', '6/12', '6/12']}>
+                <RadioValue
+                  label={formatMessage(
+                    newPrimarySchoolMessages.differentNeeds.interpreter,
+                  )}
+                  value={interpreter}
+                />
+              </GridColumn>
+
+              <GridColumn span={['12/12', '6/12', '6/12', '6/12']}>
+                <RadioValue
+                  label={formatMessage(
+                    newPrimarySchoolMessages.differentNeeds.signLanguage,
+                  )}
+                  value={signLanguage}
                 />
               </GridColumn>
             </GridRow>
-            {!icelandicSelected &&
-              icelandicNotSpokenAroundChild?.includes(YES) && (
-                <GridRow>
-                  <GridColumn span={['12/12', '12/12', '12/12', '12/12']}>
-                    <DataValue
-                      label={formatMessage(
-                        newPrimarySchoolMessages.overview
-                          .icelandicSpokenAroundChild,
-                      )}
-                      value={formatMessage(newPrimarySchoolMessages.shared.no)}
-                    />
-                  </GridColumn>
-                </GridRow>
-              )}
           </>
         )}
       </Stack>

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

@@ -2,3 +2,4 @@ export { default as FriggOptionsAsyncSelectField } from './FriggOptionsAsyncSele
 export { default as Grade } from './Grade'
 export { default as ContactsTableRepeater } from './ContactsTableRepeater'
 export { Review } from './Review'
+export { default as LanguageSelection } from './LanguageSelection'