Merged PR 40310: Create parking home screen

Create parking home screen

Related work items: #138231

Author: frankfe-amsterdam

src/modules/parking/Stack.tsx

@@ -2,18 +2,20 @@ import {createStackNavigator} from '@/app/navigation/createStackNavigator'
 import {RootStackParams} from '@/app/navigation/types'
 import {useScreenOptions} from '@/app/navigation/useScreenOptions'
 import {ParkingRouteName} from '@/modules/parking/routes'
-import {ParkingScreen} from '@/modules/parking/screens/Parking.screen'
+import {ParkingHomeScreen} from '@/modules/parking/screens/ParkingHome.screen'
 
 const Stack = createStackNavigator<RootStackParams>()
 
 export const ParkingStack = () => {
   const screenOptions = useScreenOptions()
 
   return (
-    <Stack.Navigator screenOptions={screenOptions}>
+    <Stack.Navigator
+      initialRouteName={ParkingRouteName.parkingHome}
+      screenOptions={screenOptions}>
       <Stack.Screen
-        component={ParkingScreen}
-        name={ParkingRouteName.parking}
+        component={ParkingHomeScreen}
+        name={ParkingRouteName.parkingHome}
       />
     </Stack.Navigator>
   )

src/modules/parking/routes.ts

@@ -1,7 +1,7 @@
 export enum ParkingRouteName {
-  parking = 'Parking',
+  parkingHome = 'ParkingHome',
 }
 
 export type ParkingStackParams = {
-  [ParkingRouteName.parking]: undefined
+  [ParkingRouteName.parkingHome]: undefined
 }

src/modules/parking/screens/Parking.screen.tsx

@@ -0,0 +1,79 @@
+import {Screen} from '@/components/features/screen/Screen'
+import {Button} from '@/components/ui/buttons/Button'
+import {Box} from '@/components/ui/containers/Box'
+import {Column} from '@/components/ui/layout/Column'
+import {Paragraph} from '@/components/ui/text/Paragraph'
+import {Title} from '@/components/ui/text/Title'
+import {useOpenWebUrl} from '@/hooks/linking/useOpenWebUrl'
+import {useGetRedirectUrlsQuery} from '@/modules/redirects/service'
+
+export const ParkingHomeScreen = () => {
+  const openWebUrl = useOpenWebUrl()
+  const {data: redirectUrls} = useGetRedirectUrlsQuery()
+
+  return (
+    <Screen testID="ParkingHomeScreen">
+      <Box>
+        <Column gutter="xl">
+          <Column gutter="md">
+            <Title
+              level="h2"
+              text="Voor vergunninghouders"
+            />
+            <Column gutter="lg">
+              <Paragraph>
+                Regel het parkeren voor uzelf en uw bezoekers met uw
+                parkeervergunning. Log in om een parkeersessie te starten, te
+                beheren en te betalen. Uw bezoek kan ook zelf betalen voor het
+                parkeren.
+              </Paragraph>
+              <Button
+                label="Inloggen vergunninghouder"
+                testID="ParkingHomeLoginButton"
+              />
+            </Column>
+          </Column>
+          <Column gutter="md">
+            <Title
+              level="h2"
+              text="Bent u op bezoek?"
+            />
+            <Column gutter="lg">
+              <Paragraph>
+                Bent u op bezoek bij een persoon met een bezoekersvergunning
+                vraag de persoon om de meldcode en pincode. Zo kunt u inloggen
+                en en zelf de parkeersessie starten en betalen.
+              </Paragraph>
+              <Button
+                label="Inloggen bezoek"
+                testID="ParkingHomeLoginVisitorButton"
+                variant="secondary"
+              />
+            </Column>
+          </Column>
+          <Column gutter="md">
+            <Title
+              level="h2"
+              text="Over parkeren"
+            />
+            <Column gutter="lg">
+              <Paragraph>
+                Voor informatie over parkeren voor bewoners, bedrijven, boetes
+                en parkeertarieven, kijk op de website van de gemeente
+                Amsterdam.
+              </Paragraph>
+              <Button
+                label="Parkeren informatie"
+                onPress={() => {
+                  redirectUrls && openWebUrl(redirectUrls?.parking)
+                }}
+                testID="ParkingHomeParkingInformationButton"
+                variant="secondary"
+              />
+            </Column>
+          </Column>
+        </Column>
+      </Box>
+    </Screen>
+  )
+}