Merged PR 40695: Create request-pincode screen (not complete)

Create request-pincode screen (not complete)

Related work items: #139117

Author: frankfe-amsterdam

src/modules/parking/Stack.tsx

@@ -19,6 +19,7 @@ import {LoginStepsScreen} from '@/modules/parking/screens/LoginSteps.screen'
 import {ParkingDashboardScreen} from '@/modules/parking/screens/ParkingDashBoard.screen'
 import {ParkingIntroScreen} from '@/modules/parking/screens/ParkingIntro.screen'
 import {ParkingLoginScreen} from '@/modules/parking/screens/ParkingLogin.screen'
+import {ParkingRequestPinCodeScreen} from '@/modules/parking/screens/ParkingRequestPinCode.screen'
 import {RestartLoginScreen} from '@/modules/parking/screens/RestartLogin.screen'
 import {SecureItemKey} from '@/utils/secureStorage'
 
@@ -105,18 +106,26 @@ export const ParkingStack = () => {
               <Stack.Screen
                 component={ParkingIntroScreen}
                 name={ParkingRouteName.intro}
+                options={{headerTitle: 'Aanmelden parkeren'}}
               />
               <Stack.Screen
                 component={ParkingLoginScreen}
                 name={ParkingRouteName.login}
+                options={{headerTitle: 'Inloggen'}}
               />
             </>
           ) : (
             <Stack.Screen
               component={ParkingLoginScreen}
               name={ParkingRouteName.login}
+              options={{headerTitle: 'Inloggen'}}
             />
           )}
+          <Stack.Screen
+            component={ParkingRequestPinCodeScreen}
+            name={ParkingRouteName.requestPinCode}
+            options={{headerTitle: 'Pincode vergeten'}}
+          />
         </>
       )}
     </Stack.Navigator>

src/modules/parking/components/ParkingLoginForm.tsx src/modules/parking/components/login/ParkingLoginForm.tsx

@@ -0,0 +1,36 @@
+import {FormProvider, useForm} from 'react-hook-form'
+import {TextInputField} from '@/components/ui/forms/TextInputField'
+import {Column} from '@/components/ui/layout/Column'
+
+type FormData = {
+  phoneLastFourDigits: string
+  reportCode: string
+}
+
+export const ParkingRequestPinCodeForm = () => {
+  const form = useForm<FormData>()
+
+  return (
+    <FormProvider {...form}>
+      <Column gutter="md">
+        <TextInputField
+          autoFocus
+          label="Meldcode"
+          name="reportCode"
+          rules={{
+            required: 'Vul een meldcode in',
+          }}
+          testID="ParkingRequestPinCodeFormReportCodeInputField"
+        />
+        <TextInputField
+          label="Laatste 4 cijfers van uw telefoonnummer"
+          name="phoneLastFourDigits"
+          rules={{
+            required: 'Vul laatste 4 cijfers van uw telefoonnummer in',
+          }}
+          testID="ParkingRequestPinCodeFormPhoneLastFourDigitsInputField"
+        />
+      </Column>
+    </FormProvider>
+  )
+}

src/modules/parking/components/ParkingLoginFormProvider.tsx src/modules/parking/components/login/ParkingLoginFormProvider.tsx

@@ -0,0 +1,13 @@
+import {ReactNode} from 'react'
+import {useForm, FormProvider} from 'react-hook-form'
+import {RequestPinCode} from '@/modules/parking/types'
+
+type Props = {
+  children: ReactNode
+}
+
+export const ParkingRequestPinCodeFormProvider = ({children}: Props) => {
+  const form = useForm<RequestPinCode>()
+
+  return <FormProvider {...form}>{children}</FormProvider>
+}

src/modules/parking/components/ParkingLoginFormSubmitButton.tsx src/modules/parking/components/login/ParkingLoginFormSubmitButton.tsx

@@ -0,0 +1,23 @@
+import {useFormContext} from 'react-hook-form'
+import {Button} from '@/components/ui/buttons/Button'
+import {Box} from '@/components/ui/containers/Box'
+import {RequestPinCode} from '@/modules/parking/types'
+import {devLog} from '@/processes/development'
+
+export const ParkingRequestPincodeFormSubmitButton = () => {
+  const {handleSubmit} = useFormContext<RequestPinCode>()
+
+  const onSubmit = handleSubmit(({phoneLastFourDigits, reportCode}) => {
+    devLog({phoneLastFourDigits, reportCode})
+  })
+
+  return (
+    <Box>
+      <Button
+        label="Pincode opvragen"
+        onPress={onSubmit}
+        testID="ParkingRequestPinCodeFormSubmitButton"
+      />
+    </Box>
+  )
+}

src/modules/parking/components/requestPin/ParkingRequestPinCodeForm.tsx

@@ -3,6 +3,7 @@ export enum ParkingRouteName {
   intro = 'ParkingIntro',
   login = 'ParkingLogin',
   loginSteps = 'ParkingLoginSteps',
+  requestPinCode = 'ParkingRequestPinCode',
   restartLogin = 'ParkingRestartLogin',
 }
 
@@ -11,5 +12,6 @@ export type ParkingStackParams = {
   [ParkingRouteName.intro]: undefined
   [ParkingRouteName.login]: undefined
   [ParkingRouteName.loginSteps]: undefined
+  [ParkingRouteName.requestPinCode]: undefined
   [ParkingRouteName.restartLogin]: undefined
 }

src/modules/parking/components/requestPin/ParkingRequestPinCodeFormProvider.tsx

@@ -1,12 +1,17 @@
+import {NavigationProps} from '@/app/navigation/types'
 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 {Title} from '@/components/ui/text/Title'
-import {ParkingLoginForm} from '@/modules/parking/components/ParkingLoginForm'
-import {ParkingLoginFormProvider} from '@/modules/parking/components/ParkingLoginFormProvider'
-import {ParkingLoginFormSubmitButton} from '@/modules/parking/components/ParkingLoginFormSubmitButton'
+import {ParkingLoginForm} from '@/modules/parking/components/login/ParkingLoginForm'
+import {ParkingLoginFormProvider} from '@/modules/parking/components/login/ParkingLoginFormProvider'
+import {ParkingLoginFormSubmitButton} from '@/modules/parking/components/login/ParkingLoginFormSubmitButton'
+import {ParkingRouteName} from '@/modules/parking/routes'
 
-export const ParkingLoginScreen = () => (
+type Props = NavigationProps<ParkingRouteName.login>
+
+export const ParkingLoginScreen = ({navigation: {navigate}}: Props) => (
   <ParkingLoginFormProvider>
     <Screen
       stickyFooter={<ParkingLoginFormSubmitButton />}
@@ -18,6 +23,12 @@ export const ParkingLoginScreen = () => (
             text="Inloggen Aanmelden Parkeren"
           />
           <ParkingLoginForm />
+          <Button
+            label="Pincode vergeten"
+            onPress={() => navigate(ParkingRouteName.requestPinCode)}
+            testID="ParkingLoginForgotPinButton"
+            variant="tertiary"
+          />
         </Column>
       </Box>
     </Screen>

src/modules/parking/components/requestPin/ParkingRequestPinCodeFormSubmitButton.tsx

@@ -0,0 +1,41 @@
+import {Screen} from '@/components/features/screen/Screen'
+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 {ParkingRequestPinCodeForm} from '@/modules/parking/components/requestPin/ParkingRequestPinCodeForm'
+import {ParkingRequestPinCodeFormProvider} from '@/modules/parking/components/requestPin/ParkingRequestPinCodeFormProvider'
+import {ParkingRequestPincodeFormSubmitButton} from '@/modules/parking/components/requestPin/ParkingRequestPinCodeFormSubmitButton'
+
+export const ParkingRequestPinCodeScreen = () => (
+  <ParkingRequestPinCodeFormProvider>
+    <Screen
+      stickyFooter={<ParkingRequestPincodeFormSubmitButton />}
+      testID="ParkingRequestPinCodeScreen">
+      <Box>
+        <Column gutter="lg">
+          <Column>
+            <Title
+              level="h2"
+              text="Bent u op bezoek?"
+            />
+            <Paragraph>
+              Vraag dan de persoon die u bezoekt om de meldcode en pincode.
+            </Paragraph>
+          </Column>
+          <Column>
+            <Title
+              level="h2"
+              text="Heeft u een vergunning?"
+            />
+            <Paragraph>
+              Voer uw meldcode en laatste 4 cijfers van uw telefoonnummer in om
+              uw pincode opnieuw te ontvangen.
+            </Paragraph>
+          </Column>
+          <ParkingRequestPinCodeForm />
+        </Column>
+      </Box>
+    </Screen>
+  </ParkingRequestPinCodeFormProvider>
+)

src/modules/parking/routes.ts

@@ -1,3 +1,25 @@
+export type ParkingAccountDetails = {
+  account_type: string
+  address: {
+    city: string
+    concatenated_address: string
+    house_letter: string
+    house_number: string
+    street: string
+    suffix: string
+    zip_code: string
+  }
+  client_id: number
+  email: string
+  initials: string
+  last_name: string
+  phone_number: string
+  wallet: {
+    balance: number
+    currency: string
+  }
+}
+
 type ParkingAccountAuth = {
   accessToken: string
   scope: ParkingPermitScope
@@ -8,9 +30,15 @@ export type ParkingAccountLogin = {
   reportCode: string
 }
 
+export type RequestPinCode = {
+  phoneLastFourDigits: string
+  reportCode: string
+}
+
 export type SecureParkingAccount = ParkingAccountAuth & ParkingAccountLogin
 
 export enum ParkingEndpointName {
+  accountDetails = 'accountDetails',
   login = 'login',
   permits = 'permits',
 }