Create budget screen

src/hooks/linking/useOpenRedirect.ts

@@ -0,0 +1,27 @@
+import {useCallback} from 'react'
+import {Alert} from 'react-native'
+import {useOpenWebUrl} from '@/hooks/linking/useOpenWebUrl'
+import {useGetRedirectUrlsQuery} from '@/modules/redirects/service'
+import {RedirectKey} from '@/modules/redirects/types'
+import {useTrackException} from '@/processes/logging/hooks/useTrackException'
+import {ExceptionLogKey} from '@/processes/logging/types'
+
+export const useOpenRedirect = () => {
+  const openWebUrl = useOpenWebUrl()
+  const {data: redirectUrls} = useGetRedirectUrlsQuery()
+  const trackException = useTrackException()
+
+  return useCallback(
+    (redirectKey: RedirectKey) => {
+      if (redirectUrls?.[redirectKey]) {
+        openWebUrl(redirectUrls[redirectKey])
+      } else {
+        Alert.alert('Sorry, deze functie is niet beschikbaar.')
+        trackException(ExceptionLogKey.redirectNotFound, 'Redirects.tsx', {
+          urlKey: redirectKey,
+        })
+      }
+    },
+    [openWebUrl, redirectUrls, trackException],
+  )
+}

src/modules/city-pass/components/BalanceButton.tsx → src/modules/city-pass/components/BudgetBalanceButton.tsx

@@ -10,13 +10,20 @@ import {Title} from '@/components/ui/text/Title'
 import {useNavigation} from '@/hooks/navigation/useNavigation'
 import BalanceSvg from '@/modules/city-pass/assets/balance.svg'
 import {CityPassRouteName} from '@/modules/city-pass/routes'
+import {Budget} from '@/modules/city-pass/types'
+import {formatNumber} from '@/utils/formatNumber'
 
-export const BalanceButton = () => {
+type Props = {
+  budget: Budget
+}
+
+export const BudgetBalanceButton = ({budget}: Props) => {
   const {navigate} = useNavigation()
+  const {budget_balance, omschrijving} = budget
 
   return (
     <Pressable
-      onPress={() => navigate(CityPassRouteName.balance)}
+      onPress={() => navigate(CityPassRouteName.budget, {budget})}
       testID="CityPassBalanceButton">
       <Border color="cityPass">
         <Column>
@@ -30,12 +37,12 @@ export const BalanceButton = () => {
                   <Phrase
                     color="inverse"
                     testID="CityPassBalanceButtonBalanceLabel">
-                    Saldo Kindtegoed
+                    {omschrijving}
                   </Phrase>
                   <Title
                     color="inverse"
                     testID="CityPassBalanceButtonBalanceValue"
-                    text="€ 86,43"
+                    text={formatNumber(budget_balance, true)}
                   />
                 </Column>
               </SingleSelectable>

src/modules/city-pass/components/PassOwners.tsx

@@ -0,0 +1,81 @@
+import {Button} from '@/components/ui/buttons/Button'
+import {Box} from '@/components/ui/containers/Box'
+import {Column} from '@/components/ui/layout/Column'
+import {Gutter} from '@/components/ui/layout/Gutter'
+import {Paragraph} from '@/components/ui/text/Paragraph'
+import {Title} from '@/components/ui/text/Title'
+import {useOpenRedirect} from '@/hooks/linking/useOpenRedirect'
+import {useNavigation} from '@/hooks/navigation/useNavigation'
+import {CityPassCard} from '@/modules/city-pass/components/CityPassCard'
+import {ShowCityPassButton} from '@/modules/city-pass/components/ShowCityPassButton'
+import {passOwner as passOwnerMock} from '@/modules/city-pass/mocks/passOwner'
+import {CityPassRouteName} from '@/modules/city-pass/routes'
+import {RedirectKey} from '@/modules/redirects/types'
+
+type Props = {
+  logout: () => void
+}
+
+export const PassOwners = ({logout}: Props) => {
+  const {navigate} = useNavigation()
+  const {sub_pashouders, ...pashouder} = passOwnerMock
+  const passOwners = [pashouder, ...sub_pashouders]
+  const passOwnersWithActivePass = passOwners.filter(({passen}) =>
+    passen.some(({actief}) => actief === true),
+  )
+  const passes = passOwnersWithActivePass.flatMap(({passen}) => passen)
+  const openRedirect = useOpenRedirect()
+
+  return (
+    <Box
+      insetBottom="xl"
+      insetHorizontal="md"
+      insetTop="md">
+      {passes.some(({actief}) => actief === true) ? (
+        <Column gutter="md">
+          <ShowCityPassButton passCount={passOwnersWithActivePass.length} />
+          <Gutter height="sm" />
+          {passOwnersWithActivePass.map(passOwner => {
+            const {id, voornaam} = passOwner
+
+            return (
+              <CityPassCard
+                key={id}
+                onPress={() =>
+                  navigate(CityPassRouteName.cityPassDetails, {
+                    passOwner,
+                  })
+                }
+                testID={`CityPassOwnerButton-${id}`}
+                title={`Stadspas details van ${voornaam}`}
+              />
+            )
+          })}
+        </Column>
+      ) : (
+        <>
+          <Title text="Je hebt geen Stadspas" />
+          <Gutter height="sm" />
+          <Paragraph>
+            De Stadspas is voor Amsterdammers met een laag inkomen en weinig
+            vermogen. Bekijk of je recht hebt op een Stadspas.
+          </Paragraph>
+          <Gutter height="lg" />
+          <Button
+            accessibilityRole="link"
+            label="Stadspas aanvragen"
+            onPress={() => openRedirect(RedirectKey.cityPassRequest)}
+            testID="CityPassRequestButton"
+            variant="secondary"
+          />
+          <Gutter height="lg" />
+          <Button
+            label="Uitloggen"
+            onPress={logout}
+            testID="CityPassLogoutButton"
+          />
+        </>
+      )}
+    </Box>
+  )
+}