Merge pull request #384 from kolplattformen/bugfix/359-icon-error-personal-number

fix: 🐛 Added Alert Icon when personal number is wrong

packages/app/components/absence.component.tsx

@@ -25,7 +25,7 @@ import { SafeAreaView } from '../ui/safeAreaView.component'
 import { studentName } from '../utils/peopleHelpers'
 import { useSMS } from '../utils/SMS'
 import { translate } from '../utils/translation'
-import { BackIcon } from './icon.component'
+import { BackIcon, AlertIcon } from './icon.component'
 import { RootStackParamList } from './navigation.component'
 import { SafeAreaViewContainer } from '../ui/safeAreaViewContainer.component'
 
@@ -41,6 +41,8 @@ interface AbsenceFormValues {
   endTime: moment.Moment
 }
 
+const Alert = (props: any) => <AlertIcon {...props} />
+
 const Absence = () => {
   const AbsenceSchema = Yup.object().shape({
     socialSecurityNumber: Yup.string()
@@ -155,6 +157,9 @@ const Absence = () => {
                         hasError('socialSecurityNumber') ? 'danger' : 'basic'
                       }
                       value={values.socialSecurityNumber}
+                      accessoryRight={
+                        errors.socialSecurityNumber ? Alert : undefined
+                      }
                     />
                     {hasError('socialSecurityNumber') && (
                       <Text style={styles.error}>

packages/app/components/icon.component.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 const uiIcon = (name: string) => (props: any) => <Icon {...props} name={name} />
 
+export const AlertIcon = uiIcon('alert-circle-outline')
 export const BackIcon = uiIcon('arrow-back')
 export const CalendarOutlineIcon = uiIcon('calendar-outline')
 export const CallIcon = uiIcon('phone-outline')