WouterAms · Nov 13, 2026 · Nov 13, 2026
diff --git a/src/modules/boat-charging/alerts.ts b/src/modules/boat-charging/alerts.ts
@@ -98,44 +98,44 @@ export const alerts = {
     title: 'Inloggen lukt niet',
     testID: 'BoatChargingLoginFailedAlert',
   },
-  vignetInvalidFailed: {
+  vignetteInvalidFailed: {
     variant: AlertVariant.negative,
     text: 'Dit vignet is niet geldig.',
     title: 'Niet geldig',
-    testID: 'BoatChargingVignetInvalidAlert',
+    testID: 'BoatChargingVignetteInvalidAlert',
   },
-  vignetDeleteFailed: {
+  vignetteDeleteFailed: {
     variant: AlertVariant.negative,
     text: 'Het vignet is niet verwijderd. Probeer het later nog eens.',
     title: 'Er ging iets mis',
-    testID: 'BoatChargingVignetDeleteAlert',
+    testID: 'BoatChargingVignetteDeleteAlert',
   },
-  vignetExpiredFailed: {
+  vignetteExpiredFailed: {
     variant: AlertVariant.negative,
     text: 'Dit vignet is niet meer geldig.',
     title: 'Dit vignet is verlopen',
-    testID: 'BoatChargingVignetExpiredAlert',
+    testID: 'BoatChargingVignetteExpiredAlert',
   },
-  vignetNotApplicableFailed: {
+  vignetteNotApplicableFailed: {
     variant: AlertVariant.negative,
     externalLink: {
       label: 'Bekijk welk vignet u nodig heeft',
-      redirectKey: RedirectKey.boatChargingVignetInfo,
+      redirectKey: RedirectKey.boatChargingVignetteInfo,
     },
     title: 'Met dit vignet kunt u niet laden',
-    testID: 'BoatChargingVignetNotApplicableAlert',
+    testID: 'BoatChargingVignetteNotApplicableAlert',
   },
-  vignetAlreadyInUseFailed: {
+  vignetteAlreadyInUseFailed: {
     variant: AlertVariant.negative,
     text: 'Er is al een actieve laadsessie met dit vignet. Controleer uw actieve laadsessies.',
     title: 'Vignet is al in gebruik',
-    testID: 'BoatChargingVignetAlreadyInUseAlert',
+    testID: 'BoatChargingVignetteAlreadyInUseAlert',
   },
-  vignetVerificationErrorFailed: {
+  vignetteVerificationErrorFailed: {
     variant: AlertVariant.negative,
     title: 'Vignet controleren is niet gelukt',
     text: 'Probeer het opnieuw.',
-    testID: 'BoatChargingVignetVerificationFailedAlert',
+    testID: 'BoatChargingVignetteVerificationFailedAlert',
   },
 } as const satisfies AlertsRecord
 

diff --git a/src/modules/boat-charging/components/BoatChargingConfirmSessionDetails.tsx b/src/modules/boat-charging/components/BoatChargingConfirmSessionDetails.tsx
@@ -20,22 +20,23 @@ import {
   useBoatChargingVignettesQuery,
 } from '@/modules/boat-charging/service'
 import type {
-  BaseVignet,
+  BaseVignette,
   NewSessionFormValues,
-  Vignet,
+  Vignette,
 } from '@/modules/boat-charging/types'
 import {RedirectKey} from '@/modules/redirects/exports/RedirectKey'
 import {formatNumber} from '@/utils/formatNumber'
 
-const isVignet = (vignet?: BaseVignet | Vignet | null): vignet is Vignet =>
-  !!vignet && 'id' in vignet
+const isVignette = (
+  vignette?: BaseVignette | Vignette | null,
+): vignette is Vignette => !!vignette && 'id' in vignette
 
 export const BoatChargingConfirmSessionDetails = () => {
   const form = useFormContext<NewSessionFormValues>()
   const navigation = useNavigation()
   const {isLoggedIn} = useIsLoggedIn()
 
-  const {selectedSocket, vignet, email} = form.getValues()
+  const {selectedSocket, vignette, email} = form.getValues()
 
   const {data: vignettes} = useBoatChargingVignettesQuery(undefined, {
     skip: !isLoggedIn,
@@ -55,24 +56,24 @@ export const BoatChargingConfirmSessionDetails = () => {
     selectedSocket?.locationId ? selectedSocket.locationId : skipToken,
   )
 
-  const onNavigateToChangeVignet = useCallback(() => {
-    const selectedVignet = form.getValues('vignet')
+  const onNavigateToChangeVignette = useCallback(() => {
+    const selectedVignette = form.getValues('vignette')
 
-    form.setValue('vignet', null)
+    form.setValue('vignette', null)
 
     if (!vignettes?.length) {
-      navigation.popTo(BoatChargingRouteName.verifyVignet)
+      navigation.popTo(BoatChargingRouteName.verifyVignette)
 
       return
     }
 
     if (
       vignettes.length === 1 &&
-      vignettes[0].vignette_number === selectedVignet?.vignette_number
+      vignettes[0].vignette_number === selectedVignette?.vignette_number
     ) {
-      navigation.popTo(BoatChargingRouteName.verifyVignet)
+      navigation.popTo(BoatChargingRouteName.verifyVignette)
     } else {
-      navigation.popTo(BoatChargingRouteName.chooseVignet)
+      navigation.popTo(BoatChargingRouteName.chooseVignette)
     }
   }, [vignettes, navigation, form])
 
@@ -125,16 +126,16 @@ export const BoatChargingConfirmSessionDetails = () => {
 
       <Column>
         <MetaDataCard
-          testID="BoatChargingConfirmSessionVignetMetaDataCard"
+          testID="BoatChargingConfirmSessionVignetteMetaDataCard"
           title="Vignet">
-          <Phrase>{vignet?.vignette_number}</Phrase>
-          {isVignet(vignet) && !!vignet.boat_name && (
-            <Phrase color="secondary">{vignet?.boat_name}</Phrase>
+          <Phrase>{vignette?.vignette_number}</Phrase>
+          {isVignette(vignette) && !!vignette.boat_name && (
+            <Phrase color="secondary">{vignette?.boat_name}</Phrase>
           )}
         </MetaDataCard>
         <InlineLink
-          onPress={onNavigateToChangeVignet}
-          testID="BoatChargingConfirmSessionVignetNavigationButton"
+          onPress={onNavigateToChangeVignette}
+          testID="BoatChargingConfirmSessionVignetteNavigationButton"
           variant="internal">
           Wijzigen
         </InlineLink>

diff --git a/src/modules/boat-charging/components/BoatChargingConfirmSessionSubmitButton.tsx b/src/modules/boat-charging/components/BoatChargingConfirmSessionSubmitButton.tsx
@@ -1,10 +1,10 @@
 import {useCallback} from 'react'
 import {Button} from '@/components/ui/buttons/Button'
 import {alerts} from '@/modules/boat-charging/alerts'
-import {vignetInvalidReasonToAlertMap} from '@/modules/boat-charging/constants/vignetInvalidReasonToAlertMap'
+import {vignetteInvalidReasonToAlertMap} from '@/modules/boat-charging/constants/vignetteInvalidReasonToAlertMap'
 import {useInitSession} from '@/modules/boat-charging/hooks/useInitSession'
 import {BoatChargingRouteName} from '@/modules/boat-charging/routes'
-import {useBoatChargingVerifyVignetMutation} from '@/modules/boat-charging/service'
+import {useBoatChargingVerifyVignetteMutation} from '@/modules/boat-charging/service'
 import {type NewSessionFormValues} from '@/modules/boat-charging/types'
 import {devError} from '@/processes/development'
 import {useAlert} from '@/store/slices/alert'
@@ -17,39 +17,39 @@ export const BoatChargingConfirmSessionSubmitButton = () => {
   )
 
   const [
-    verifyVignet,
-    {isLoading: isLoadingVerifyVignet, isError: isErrorVerifyVignet},
-  ] = useBoatChargingVerifyVignetMutation()
+    verifyVignette,
+    {isLoading: isLoadingVerifyVignette, isError: isErrorVerifyVignette},
+  ] = useBoatChargingVerifyVignetteMutation()
 
   const onSubmit = useCallback(
-    async ({vignet, ...values}: NewSessionFormValues) => {
-      if (!vignet) {
+    async ({vignette, ...values}: NewSessionFormValues) => {
+      if (!vignette) {
         return
       }
 
-      if (!vignet.verified) {
+      if (!vignette.verified) {
         try {
-          const {status, reason} = await verifyVignet(vignet).unwrap()
+          const {status, reason} = await verifyVignette(vignette).unwrap()
 
           if (status === 'invalid') {
-            setAlert(alerts[vignetInvalidReasonToAlertMap[reason]])
+            setAlert(alerts[vignetteInvalidReasonToAlertMap[reason]])
 
             return
           }
 
-          form.setValue('vignet.verified', true)
+          form.setValue('vignette.verified', true)
         } catch (error) {
           devError(error)
 
-          setAlert(alerts.vignetVerificationErrorFailed)
+          setAlert(alerts.vignetteVerificationErrorFailed)
 
           return
         }
       }
 
-      return onPress({...values, vignet})
+      return onPress({...values, vignette})
     },
-    [verifyVignet, onPress, setAlert, form],
+    [onPress, setAlert, form, verifyVignette],
   )
 
   return (
@@ -60,9 +60,9 @@ export const BoatChargingConfirmSessionSubmitButton = () => {
         size: 'ml',
         isFilled: true,
       }}
-      isError={isError || isErrorVerifyVignet}
+      isError={isError || isErrorVerifyVignette}
       isLoading={
-        isLoading || isLoadingVerifyVignet || form.formState.isSubmitting
+        isLoading || isLoadingVerifyVignette || form.formState.isSubmitting
       }
       label="Betalen en laden"
       onPress={form.handleSubmit(onSubmit)}

diff --git a/src/modules/boat-charging/components/BoatChargingGuestEmailForm.tsx b/src/modules/boat-charging/components/BoatChargingGuestEmailForm.tsx
@@ -44,7 +44,7 @@ export const BoatChargingGuestEmailForm = () => {
           <Paragraph>Heeft u al een account?</Paragraph>
           <InlineLink
             onPress={() => {
-              setPendingScreen([BoatChargingRouteName.chooseVignet])
+              setPendingScreen([BoatChargingRouteName.chooseVignette])
               navigation.navigate(BoatChargingRouteName.login)
             }}
             testID="BoatChargingGuestEmailFormLoginNavigationButton"
@@ -74,7 +74,7 @@ export const BoatChargingGuestEmailForm = () => {
         <Button
           label="Account aanmaken"
           onPress={() => {
-            setPendingScreen([BoatChargingRouteName.verifyVignet])
+            setPendingScreen([BoatChargingRouteName.verifyVignette])
             navigation.navigate(BoatChargingRouteName.createAccount)
           }}
           testID="BoatChargingGuestEmailFormCreateAccountButton"

diff --git a/src/modules/boat-charging/components/BoatChargingHistorySessionDetails.tsx b/src/modules/boat-charging/components/BoatChargingHistorySessionDetails.tsx
@@ -112,7 +112,7 @@ export const BoatChargingHistorySessionDetails = () => {
         {!!vignette_number && (
           <MetaDataCard
             iconName="boat"
-            testID="BoatChargingHistorySessionDetailsVignetCard"
+            testID="BoatChargingHistorySessionDetailsVignetteCard"
             title="Vignet">
             <Phrase>{vignette_number}</Phrase>
             <Phrase color="secondary">{boat_name}</Phrase>

diff --git a/src/modules/boat-charging/components/session/BoatChargingSession.tsx b/src/modules/boat-charging/components/session/BoatChargingSession.tsx
@@ -115,7 +115,7 @@ export const BoatChargingSession = () => {
           <Divider />
 
           <MetaDataCard
-            testID="BoatChargingSessionVignetMetaDataCard"
+            testID="BoatChargingSessionVignetteMetaDataCard"
             title="Vignet">
             <Phrase>{session.vignette_number}</Phrase>
             {!!session.boat_name && (

diff --git a/...tes/BoatChargingAddVignetHeaderButton.tsx → ...s/BoatChargingAddVignetteHeaderButton.tsx b/...tes/BoatChargingAddVignetHeaderButton.tsx → ...s/BoatChargingAddVignetteHeaderButton.tsx
@@ -6,7 +6,7 @@ import {useIsLoggedIn} from '@/modules/boat-charging/hooks/useIsLoggedIn'
 import {BoatChargingRouteName} from '@/modules/boat-charging/routes'
 import {useBoatChargingVignettesQuery} from '@/modules/boat-charging/service'
 
-export const BoatChargingAddVignetHeaderButton = () => {
+export const BoatChargingAddVignetteHeaderButton = () => {
   const {navigate} = useNavigation()
   const {isLoggedIn} = useIsLoggedIn()
 
@@ -28,13 +28,13 @@ export const BoatChargingAddVignetHeaderButton = () => {
           isFilled
           name="plus-circle"
           size="lgx"
-          testID="BoatChargingAddVignetHeaderButtonIcon"
+          testID="BoatChargingAddVignetteHeaderButtonIcon"
         />
       }
       onPress={() => {
-        navigate(BoatChargingRouteName.vignet)
+        navigate(BoatChargingRouteName.vignette)
       }}
-      testID="BoatChargingAddVignetHeaderButton"
+      testID="BoatChargingAddVignetteHeaderButton"
     />
   )
 }
diff --git a/src/modules/boat-charging/components/vignettes/BoatChargingMyVignettes.tsx b/src/modules/boat-charging/components/vignettes/BoatChargingMyVignettes.tsx
@@ -6,7 +6,7 @@ import {SomethingWentWrong} from '@/components/ui/feedback/SomethingWentWrong'
 import {Column} from '@/components/ui/layout/Column'
 import {useNavigation} from '@/hooks/navigation/useNavigation'
 import {BoatChargingMyVignettesLogin} from '@/modules/boat-charging/components/vignettes/BoatChargingMyVignettesLogin'
-import {BoatChargingVignetListItem} from '@/modules/boat-charging/components/vignettes/BoatChargingVignetListItem'
+import {BoatChargingVignetteListItem} from '@/modules/boat-charging/components/vignettes/BoatChargingVignetteListItem'
 import {useIsLoggedIn} from '@/modules/boat-charging/hooks/useIsLoggedIn'
 import {BoatChargingRouteName} from '@/modules/boat-charging/routes'
 import {useBoatChargingVignettesQuery} from '@/modules/boat-charging/service'
@@ -47,20 +47,20 @@ export const BoatChargingMyVignettes = () => {
           icon={{name: 'plus-circle', isFilled: true}}
           label="Vignet toevoegen"
           onPress={() => {
-            navigate(BoatChargingRouteName.vignet)
+            navigate(BoatChargingRouteName.vignette)
           }}
-          testID="BoatChargingMyVignettesEmptyListAddVignetButton"
+          testID="BoatChargingMyVignettesEmptyListAddVignetteButton"
         />
       </>
     )
   }
 
   return (
     <Column gutter="md">
-      {vignettes.map(vignet => (
-        <BoatChargingVignetListItem
-          key={vignet.id}
-          vignet={vignet}
+      {vignettes.map(vignette => (
+        <BoatChargingVignetteListItem
+          key={vignette.id}
+          vignette={vignette}
         />
       ))}
     </Column>

diff --git a/.../vignettes/BoatChargingVignetListItem.tsx → ...ignettes/BoatChargingVignetteListItem.tsx b/.../vignettes/BoatChargingVignetListItem.tsx → ...ignettes/BoatChargingVignetteListItem.tsx
@@ -1,15 +1,15 @@
 import {TopTaskButton} from '@/components/ui/buttons/TopTaskButton'
 import {useNavigation} from '@/hooks/navigation/useNavigation'
 import {BoatChargingRouteName} from '@/modules/boat-charging/routes'
-import type {Vignet} from '@/modules/boat-charging/types'
+import type {Vignette} from '@/modules/boat-charging/types'
 import {formatDateToDisplay} from '@/utils/datetime/formatDateToDisplay'
 
 type Props = {
-  vignet: Vignet
+  vignette: Vignette
 }
 
-export const BoatChargingVignetListItem = ({
-  vignet: {boat_name, vignette_number, expiration_date, id},
+export const BoatChargingVignetteListItem = ({
+  vignette: {boat_name, vignette_number, expiration_date, id},
 }: Props) => {
   const {navigate} = useNavigation()
 
@@ -30,8 +30,8 @@ export const BoatChargingVignetListItem = ({
         color: 'secondary',
       }}
       insetHorizontal="no"
-      onPress={() => navigate(BoatChargingRouteName.vignet, {vignetId: id})}
-      testID="VignetListItemTopTaskButton"
+      onPress={() => navigate(BoatChargingRouteName.vignette, {vignetteId: id})}
+      testID="VignetteListItemTopTaskButton"
       text={boat_name}
       textAdditional={`Geldig tot ${formatDateToDisplay(expiration_date)}`}
       title={vignette_number}