diff --git a/src/hooks/linking/useOpenRedirect.ts b/src/hooks/linking/useOpenRedirect.ts new file mode 100644 index 000000000..2fab878d2 --- /dev/null +++ b/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], + ) +} diff --git a/src/modules/city-pass/components/BalanceButton.tsx b/src/modules/city-pass/components/BudgetBalanceButton.tsx similarity index 83% rename from src/modules/city-pass/components/BalanceButton.tsx rename to src/modules/city-pass/components/BudgetBalanceButton.tsx index 6f3494dfc..621235f5c 100644 --- a/src/modules/city-pass/components/BalanceButton.tsx +++ b/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 ( navigate(CityPassRouteName.balance)} + onPress={() => navigate(CityPassRouteName.budget, {budget})} testID="CityPassBalanceButton"> @@ -30,12 +37,12 @@ export const BalanceButton = () => { - Saldo Kindtegoed + {omschrijving} </Column> </SingleSelectable> diff --git a/src/modules/city-pass/components/PassOwners.tsx b/src/modules/city-pass/components/PassOwners.tsx new file mode 100644 index 000000000..1b7d14778 --- /dev/null +++ b/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> + ) +} diff --git a/src/modules/city-pass/components/TransactionHistory.tsx b/src/modules/city-pass/components/TransactionHistory.tsx index cc70bbc9c..13b993565 100644 --- a/src/modules/city-pass/components/TransactionHistory.tsx +++ b/src/modules/city-pass/components/TransactionHistory.tsx @@ -1,3 +1,4 @@ +import {useMemo} from 'react' import {Border} from '@/components/ui/containers/Border' import {Box} from '@/components/ui/containers/Box' import {SingleSelectable} from '@/components/ui/containers/SingleSelectable' @@ -10,101 +11,26 @@ import {Transaction} from '@/modules/city-pass/types' import {formatDate} from '@/utils/datetime/formatDate' import {formatNumber} from '@/utils/formatNumber' -const omschrijving = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' - -const transactions: Transaction[] = [ - { - id: 1, - aanbieder: { - id: 1, - naam: 'Over het IJ Festival', - }, - bedrag: 104.95, - omschrijving, - transactiedatum: '2024-06-10T04:01:01.0000', - }, - { - id: 2, - aanbieder: { - id: 2, - naam: 'Stedelijk Museum Amsterdam', - }, - bedrag: 22.5, - omschrijving, - transactiedatum: '2024-06-10T04:01:01.0000', - }, - { - id: 3, - aanbieder: { - id: 3, - naam: 'ARTIS', - }, - bedrag: 29.95, - omschrijving, - transactiedatum: '2024-06-04T04:01:01.0000', - }, - { - id: 4, - aanbieder: { - id: 4, - naam: 'NEMO Science Museum', - }, - bedrag: 27.5, - omschrijving, - transactiedatum: '2024-05-22T04:01:01.0000', - }, - { - id: 5, - aanbieder: { - id: 5, - naam: 'Eye Filmmuseum', - }, - bedrag: 11.5, - omschrijving, - transactiedatum: '2024-05-22T04:01:01.0000', - }, - { - id: 6, - aanbieder: { - id: 2, - naam: 'Stedelijk Museum Amsterdam', - }, - bedrag: 22.5, - omschrijving, - transactiedatum: '2024-05-06T04:01:01.0000', - }, - { - id: 7, - aanbieder: { - id: 3, - naam: 'ARTIS', - }, - bedrag: 29.95, - omschrijving, - transactiedatum: '2024-02-16T04:01:01.0000', - }, -] - type TransactionsByDate = { data: Transaction[] date: string } -const transactionsByDate = transactions?.reduce( - (result: TransactionsByDate[], transaction) => { +const getTransactionsByDate = (transactions: Transaction[]) => + transactions.reduce((result: TransactionsByDate[], transaction) => { const date = formatDate(transaction.transactiedatum) - const section = result.find(s => s.date === date) + const today = formatDate(new Date().toISOString()) + const dateOrToday = date === today ? 'Vandaag' : date + const section = result.find(s => s.date === dateOrToday) if (section) { section.data.push(transaction) } else { - result.push({date, data: [transaction]}) + result.push({date: dateOrToday, data: [transaction]}) } return result - }, - [] as TransactionsByDate[], -) + }, [] as TransactionsByDate[]) const NoTransactions = () => ( <Border bottom> @@ -118,82 +44,112 @@ const NoTransactions = () => ( </Border> ) -const TransactionItem = ({transaction}: {transaction: Transaction}) => ( +type TransactionItemProps = { + transaction: Transaction +} + +const TransactionItem = ({ + transaction: {aanbieder, bedrag, budget, omschrijving}, +}: TransactionItemProps) => ( <Column> <Row align="between"> <Phrase emphasis="strong" testID=""> - {transaction.aanbieder.naam} + {budget?.aanbieder?.naam ?? aanbieder?.naam} </Phrase> <Phrase emphasis="strong" testID=""> - {formatNumber(transaction.bedrag, true)} + {formatNumber(bedrag, true)} </Phrase> </Row> - {!!transaction.omschrijving && ( - <Paragraph>{transaction.omschrijving}</Paragraph> - )} + {!!omschrijving && <Paragraph>{omschrijving}</Paragraph>} </Column> ) -export const TransactionHistory = () => ( - <Column gutter="md"> - <Title text="Mijn acties" /> - <Paragraph> - {`In in totaal heb je ${formatNumber(103.95, true)} bespaard. Deze informatie kan 1 dag achterlopen.`} - </Paragraph> - <Border bottom> - <Box insetBottom="sm"> - <SingleSelectable - accessibilityLabel="Hieronder volgt een overzicht van jouw acties" - accessibilityRole="header" - testID="CityPassTransactionHistoryTableHeader"> - <Row align="between"> - <Phrase - emphasis="strong" - testID="CityPassTransactionHistoryTableHeaderDescription"> - Omschrijving - </Phrase> - <Phrase - emphasis="strong" - testID="CityPassTransactionHistoryTableHeaderValue"> - Besparing - </Phrase> - </Row> - </SingleSelectable> - </Box> - </Border> - {transactionsByDate.length ? ( - transactionsByDate.map(dateGroup => ( - <Border - bottom - key={dateGroup.date}> - <Box insetBottom="lg"> - <SingleSelectable> - <Column gutter="sm"> +type Props = { + transactions: Transaction[] + type: 'budget' | 'savings' +} + +export const TransactionHistory = ({transactions, type}: Props) => { + const transactionsByDate = useMemo( + () => getTransactionsByDate(transactions), + [transactions], + ) + + return ( + <Column gutter="md"> + {type === 'savings' ? ( + <> + <Title text="Mijn acties" /> + <Paragraph> + {`In in totaal heb je ${formatNumber(103.95, true)} bespaard. Deze informatie kan 1 dag achterlopen.`} + </Paragraph> + </> + ) : ( + <> + <Title text="Betalingen" /> + <Paragraph> + Deze informatie kan 1 dag achterlopen. Het saldo dat je nog over + hebt klopt altijd. + </Paragraph> + </> + )} + <Border bottom> + <Box insetBottom="sm"> + {type === 'savings' && ( + <SingleSelectable + accessibilityLabel="Hieronder volgt een overzicht van jouw acties" + accessibilityRole="header" + testID="CityPassTransactionHistoryTableHeader"> + <Row align="between"> + <Phrase + emphasis="strong" + testID="CityPassTransactionHistoryTableHeaderDescription"> + Omschrijving + </Phrase> <Phrase - color="secondary" - testID=""> - {dateGroup.date} + emphasis="strong" + testID="CityPassTransactionHistoryTableHeaderValue"> + Besparing </Phrase> - {dateGroup.data.map(transaction => ( - <TransactionItem - key={transaction.id} - transaction={transaction} - /> - ))} - </Column> + </Row> </SingleSelectable> - </Box> - </Border> - )) - ) : ( - <NoTransactions /> - )} - <Paragraph textAlign="center"> - Dit waren jouw acties vanaf 1 augustus 2023{' '} - </Paragraph> - </Column> -) + )} + </Box> + </Border> + {transactionsByDate.length ? ( + transactionsByDate.map(dateGroup => ( + <Border + bottom + key={dateGroup.date}> + <Box insetBottom="lg"> + <SingleSelectable> + <Column gutter="sm"> + <Phrase + color="secondary" + testID=""> + {dateGroup.date} + </Phrase> + {dateGroup.data.map(transaction => ( + <TransactionItem + key={transaction.id} + transaction={transaction} + /> + ))} + </Column> + </SingleSelectable> + </Box> + </Border> + )) + ) : ( + <NoTransactions /> + )} + <Paragraph textAlign="center"> + Dit waren jouw acties vanaf 1 augustus 2023{' '} + </Paragraph> + </Column> + ) +} diff --git a/src/modules/city-pass/constants.ts b/src/modules/city-pass/constants.ts index 95a8418e7..0823680cd 100644 --- a/src/modules/city-pass/constants.ts +++ b/src/modules/city-pass/constants.ts @@ -1,2 +1,29 @@ +import {AboutBlock} from '@/modules/city-pass/types' +import {RedirectKey} from '@/modules/redirects/types' + export const DEFAULT_PASS_WIDTH = 312 export const CITY_PASS_HEIGHT = 550 + +export const aboutBlocks: AboutBlock[] = [ + { + icon: 'list', + redirectKey: RedirectKey.citypass, + title: 'Bekijk het aanbod', + text: 'Gratis of met hoge korting sporten, naar de bioscoop, het theater, of het museum.', + testID: 'CityPassOverviewLink', + }, + { + icon: 'child', + redirectKey: RedirectKey.cityPassChildBudget, + title: 'Over het kindtegoed', + text: 'Kinderen tot en met 17 jaar krijgen Kindtegoed op hun Stadspas. ', + testID: 'CityPassChildBudgetLink', + }, + { + icon: 'question-mark-circle', + redirectKey: RedirectKey.cityPassUsage, + title: 'Zo werkt je Stadspas', + text: 'Lees meer over wat de Stadspas is en hoe het werkt.', + testID: 'CityPassUsageLink', + }, +] diff --git a/src/modules/city-pass/mocks/cityPass.ts b/src/modules/city-pass/mocks/cityPass.ts new file mode 100644 index 000000000..af680d547 --- /dev/null +++ b/src/modules/city-pass/mocks/cityPass.ts @@ -0,0 +1,44 @@ +export const cityPass = { + actief: true, + balance_update_time: '2020-04-02T12:45:41.000Z', + budgetten: [ + { + code: 'AMSTEG_10-14', + naam: 'Kindtegoed 10-14', + omschrijving: 'Kindtegoed', + expiry_date: '2021-08-31T21:59:59.000Z', + budget_assigned: 150, + budget_balance: 0, + }, + { + code: 'AMSTEG_06-30', + naam: 'Tegoed automatisch laden', + omschrijving: 'Tegoed automatisch laden', + expiry_date: '2021-08-31T21:59:59.000Z', + budget_assigned: 75, + budget_balance: 0, + }, + ], + budgetten_actief: true, + categorie: 'Amsterdamse Digitale Stadspas', + categorie_code: 'A', + expiry_date: '2020-08-31T23:59:59.000Z', + id: 999999, + originele_pas: { + categorie: 'Amsterdamse Digitale Stadspas', + categorie_code: 'A', + id: 888888, + pasnummer: 8888888888888, + pasnummer_volledig: '8888888888888888888', + passoort: { + id: 11, + naam: 'Digitale Stadspas', + }, + }, + pasnummer: 6666666666666, + pasnummer_volledig: '6666666666666666666', + passoort: { + id: 11, + naam: 'Digitale Stadspas', + }, +} diff --git a/src/modules/city-pass/mocks/passOwner.ts b/src/modules/city-pass/mocks/passOwner.ts new file mode 100644 index 000000000..3d5e0e5fb --- /dev/null +++ b/src/modules/city-pass/mocks/passOwner.ts @@ -0,0 +1,322 @@ +const categorie = 'Minima stadspas' +const expiry_date = '2023-07-31T21:59:59.000Z' +const expiry_date2 = '2024-07-31T21:59:59.000Z' +const naam = 'Digitale Stadspas' + +export const passOwner = { + id: '03630000316908', + has_account: false, + voornaam: 'Marga', + initialen: 'M.', + achternaam: 'Eucalyptus', + volledige_naam: 'M. Eucalyptus', + geslacht: 'F', + geboortedatum: '1980-04-23T00:00:00.000Z', + mailing: true, + gemeente: 'Amsterdam', + gemeentecode: '0363', + heeft_budget: false, + adressen: [ + { + id: 202791, + adres_type: 'Woonadres', + straat: 'Dam 1', + huisnummer: 402, + huisnummer_letter: 'A', + huisnummer_toevoeging: '', + postcode: '1111AA', + plaats: { + id: 64, + naam: 'Amsterdam', + gemeente: 'Amsterdam', + }, + }, + { + id: 202791, + adres_type: 'Postadres', + straat: 'Dam 1', + huisnummer: 402, + huisnummer_letter: 'A', + huisnummer_toevoeging: '', + postcode: '1111AA', + plaats: { + id: 64, + naam: 'Amsterdam', + gemeente: 'Amsterdam', + }, + }, + ], + passen: [ + { + id: 201052, + pasnummer: 6011012781014, + pasnummer_volledig: '6064366011012781014', + categorie, + categorie_code: 'M', + actief: false, + expiry_date, + heeft_budget: false, + vervangen: false, + passoort: { + id: 11, + naam, + }, + budgetten: [], + }, + { + id: 201191, + pasnummer: 6011012867540, + pasnummer_volledig: '6064366011012867540', + categorie, + categorie_code: 'M', + actief: true, + expiry_date: expiry_date2, + heeft_budget: false, + vervangen: false, + passoort: { + id: 11, + naam, + }, + budgetten: [], + }, + ], + sub_pashouders: [ + { + id: '03630000316910', + voornaam: 'Jan', + initialen: 'J.S.', + achternaam: 'Innocent', + volledige_naam: 'J.S. Innocent', + geslacht: 'M', + geboortedatum: '1979-01-23T00:00:00.000Z', + heeft_budget: true, + passen: [ + { + id: 201174, + pasnummer: 6011012856477, + pasnummer_volledig: '6064366011012856477', + categorie, + categorie_code: 'M', + expiry_date: expiry_date2, + passoort: { + id: 11, + naam, + }, + actief: true, + heeft_budget: true, + vervangen: false, + budgetten: [ + { + code: '2023_AMSTEG_ENERGIE', + naam: '23/24 Energie tegoed', + }, + ], + }, + { + id: 201053, + pasnummer: 6011012781063, + pasnummer_volledig: '6064366011012781063', + categorie, + categorie_code: 'M', + expiry_date, + passoort: { + id: 11, + naam, + }, + actief: false, + heeft_budget: false, + vervangen: false, + budgetten: [], + }, + ], + }, + { + id: '03630000316911', + voornaam: 'Hendrik', + initialen: 'H.J.', + achternaam: 'Innocent', + volledige_naam: 'H.J. Innocent', + geslacht: 'M', + geboortedatum: '2009-12-17T00:00:00.000Z', + heeft_budget: true, + passen: [ + { + id: 201175, + pasnummer: 6011012856618, + pasnummer_volledig: '6064366011012856618', + categorie, + categorie_code: 'M', + expiry_date: expiry_date2, + passoort: { + id: 11, + naam, + }, + actief: true, + heeft_budget: true, + vervangen: false, + budgetten: [ + { + code: '2023_AMSTEG_12-14', + naam: '23/24 Kindtegoed 12 tm 14 jaar', + }, + ], + }, + { + id: 201054, + pasnummer: 6011012781154, + pasnummer_volledig: '6064366011012781154', + categorie, + categorie_code: 'M', + expiry_date, + passoort: { + id: 11, + naam, + }, + actief: false, + heeft_budget: true, + vervangen: false, + budgetten: [], + }, + ], + }, + { + id: '03630000316912', + voornaam: 'Barbie', + initialen: 'B.A.', + achternaam: 'Eucalyptus', + volledige_naam: 'B.A. Eucalyptus', + geslacht: 'F', + geboortedatum: '2006-05-29T00:00:00.000Z', + heeft_budget: true, + passen: [ + { + id: 201176, + pasnummer: 6011012857301, + pasnummer_volledig: '6064366011012857301', + categorie, + categorie_code: 'M', + expiry_date: expiry_date2, + passoort: { + id: 11, + naam, + }, + actief: true, + heeft_budget: true, + vervangen: false, + budgetten: [ + { + code: '2023_AMSTEG_15-17', + naam: '23/24 Kindtegoed 15 tm 17 jaar', + }, + ], + }, + { + id: 201055, + pasnummer: 6011012783390, + pasnummer_volledig: '6064366011012783390', + categorie, + categorie_code: 'M', + expiry_date, + passoort: { + id: 11, + naam, + }, + actief: false, + heeft_budget: false, + vervangen: false, + budgetten: [], + }, + ], + }, + { + id: '03630000316913', + voornaam: 'Chelsea', + initialen: 'C.', + achternaam: 'Innocent', + volledige_naam: 'C. Innocent', + geslacht: 'F', + geboortedatum: '2020-02-20T00:00:00.000Z', + heeft_budget: true, + passen: [ + { + id: 201177, + pasnummer: 6011012857970, + pasnummer_volledig: '6064366011012857970', + categorie, + categorie_code: 'M', + expiry_date: expiry_date2, + passoort: { + id: 11, + naam, + }, + actief: true, + heeft_budget: true, + vervangen: false, + budgetten: [ + { + code: '2023_AMSTEG_2-3_KVS', + naam: '23/24 Kindtegoed voorschool 2 tm 3 jaar', + }, + { + code: '2023_AMSTEG_0-3', + naam: '23/24 Kindtegoed 0 tm 3 jaar', + }, + ], + }, + { + id: 201056, + pasnummer: 6011012783762, + pasnummer_volledig: '6064366011012783762', + categorie, + categorie_code: 'M', + expiry_date, + passoort: { + id: 11, + naam, + }, + actief: false, + heeft_budget: true, + vervangen: false, + budgetten: [], + }, + ], + }, + { + id: '03630000318648', + voornaam: 'Mini', + initialen: 'M', + achternaam: 'Klaproos', + volledige_naam: 'M Klaproos', + geslacht: 'F', + geboortedatum: '2021-12-12T00:00:00.000Z', + heeft_budget: true, + passen: [ + { + id: 201244, + pasnummer: 6011012897026, + pasnummer_volledig: '6064366011012897026', + categorie, + categorie_code: 'M', + expiry_date: expiry_date2, + passoort: { + id: 11, + naam, + }, + actief: true, + heeft_budget: true, + vervangen: false, + budgetten: [ + { + code: 'AMSTEG_autom_laden_TEST', + naam: 'Automatisch laden TEST', + }, + { + code: '2023_AMSTEG_2-3_KVS', + naam: '23/24 Kindtegoed voorschool 2 tm 3 jaar', + }, + ], + }, + ], + }, + ], +} diff --git a/src/modules/city-pass/mocks/transactions.ts b/src/modules/city-pass/mocks/transactions.ts new file mode 100644 index 000000000..104aeec91 --- /dev/null +++ b/src/modules/city-pass/mocks/transactions.ts @@ -0,0 +1,449 @@ +const naam = 'Ander budget' +const transactiedatum = '2020-10-05T04:01:01.0000' + +export const transactions = { + number_of_items: 20, + total_items: 42, + transacties: [ + { + id: 1, + transactiedatum, + bedrag: 17, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 0'}, + }, + }, + { + id: 2, + transactiedatum, + bedrag: 10, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 1'}, + }, + }, + { + id: 3, + transactiedatum, + bedrag: 1, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 2'}, + }, + }, + { + id: 4, + transactiedatum, + bedrag: 16, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 3'}, + }, + }, + { + id: 5, + transactiedatum, + bedrag: 17, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 4'}, + }, + }, + { + id: 6, + transactiedatum, + bedrag: 19, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 5'}, + }, + }, + { + id: 7, + transactiedatum, + bedrag: 11, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 6'}, + }, + }, + { + id: 8, + transactiedatum, + bedrag: 7, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 7'}, + }, + }, + { + id: 9, + transactiedatum, + bedrag: 7, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 8'}, + }, + }, + { + id: 10, + transactiedatum, + bedrag: 13, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 9'}, + }, + }, + { + id: 11, + transactiedatum, + bedrag: 19, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 10'}, + }, + }, + { + id: 12, + transactiedatum, + bedrag: 9, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 11'}, + }, + }, + { + id: 13, + transactiedatum, + bedrag: 10, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 12'}, + }, + }, + { + id: 14, + transactiedatum, + bedrag: 10, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 13'}, + }, + }, + { + id: 15, + transactiedatum, + bedrag: 8, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 14'}, + }, + }, + { + id: 16, + transactiedatum, + bedrag: 8, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 15'}, + }, + }, + { + id: 17, + transactiedatum, + bedrag: 2, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 16'}, + }, + }, + { + id: 18, + transactiedatum, + bedrag: 15, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 17'}, + }, + }, + { + id: 19, + transactiedatum, + bedrag: 6, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam, + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 18'}, + }, + }, + { + id: 20, + transactiedatum, + bedrag: 6, + pashouder: {id: 1, hoofd_pashouder_id: 2}, + pas: { + id: 2, + pasnummer: 6666666666666, + pasnummer_volledig: '66666666666666', + originele_pas: { + id: 1, + pasnummer: 66666666666666, + pasnummer_volledig: '66666666666666', + }, + }, + budget: { + id: 44, + code: 'GPAS05_19', + naam: 'Schoolactiviteiten', + aanbieder: {id: 222222, naam: 'Fietsenwinkel - B.V. 19'}, + }, + }, + ], +} diff --git a/src/modules/city-pass/routes.ts b/src/modules/city-pass/routes.ts index dfc2b094e..3297b31a0 100644 --- a/src/modules/city-pass/routes.ts +++ b/src/modules/city-pass/routes.ts @@ -1,14 +1,16 @@ +import {Budget, PassOwner} from '@/modules/city-pass/types' + export enum CityPassRouteName { - balance = 'Balance', + budget = 'Budget', cityPassDetails = 'CityPassDetails', dashboard = 'Dashboard', securityCode = 'SecurityCode', } export type CityPassStackParams = { - [CityPassRouteName.cityPassDetails]: {passNumber: number} + [CityPassRouteName.cityPassDetails]: {passOwner: PassOwner} [CityPassRouteName.dashboard]: undefined - [CityPassRouteName.balance]: undefined + [CityPassRouteName.budget]: {budget: Budget} [CityPassRouteName.securityCode]: undefined } diff --git a/src/modules/city-pass/screenConfig.ts b/src/modules/city-pass/screenConfig.ts index af2629e0b..0e44c3c38 100644 --- a/src/modules/city-pass/screenConfig.ts +++ b/src/modules/city-pass/screenConfig.ts @@ -4,7 +4,7 @@ import { CityPassRouteName, CityPassStackParams, } from '@/modules/city-pass/routes' -import {BalanceScreen} from '@/modules/city-pass/screens/Balance.screen' +import {BudgetScreen} from '@/modules/city-pass/screens/Budget.screen' import {CityPassDetailsScreen} from '@/modules/city-pass/screens/CityPassDetails.screen' import {DashboardScreen} from '@/modules/city-pass/screens/Dashboard.screen' import {SecurityCodeScreen} from '@/modules/city-pass/screens/SecurityCode.screen' @@ -13,9 +13,9 @@ export const screenConfig: StackNavigationRoutes< CityPassStackParams, CityPassRouteName > = { - [CityPassRouteName.balance]: { - component: BalanceScreen, - name: CityPassRouteName.balance, + [CityPassRouteName.budget]: { + component: BudgetScreen, + name: CityPassRouteName.budget, }, [CityPassRouteName.dashboard]: { component: DashboardScreen, diff --git a/src/modules/city-pass/screens/Balance.screen.tsx b/src/modules/city-pass/screens/Balance.screen.tsx deleted file mode 100644 index b768a2198..000000000 --- a/src/modules/city-pass/screens/Balance.screen.tsx +++ /dev/null @@ -1,31 +0,0 @@ -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 {useSetScreenTitle} from '@/hooks/navigation/useSetScreenTitle' -import {CityPassLoginBoundaryScreen} from '@/modules/city-pass/components/CityPassLoginBoundaryScreen' - -export const BalanceScreen = () => { - useSetScreenTitle('Ryan') - - return ( - <CityPassLoginBoundaryScreen testID="CityPassBalanceScreen"> - <Box> - <Column gutter="lg"> - <Title - testID="CityPassBalanceTitleLabel" - text="Kindtegoed" - /> - <Title - testID="CityPassBalanceTitleValue" - text="€ 86,34" - /> - <Column> - <Paragraph>Was in het begin € 125,00.</Paragraph> - <Paragraph>Geldig tot en met 31 juli 2024.</Paragraph> - </Column> - </Column> - </Box> - </CityPassLoginBoundaryScreen> - ) -} diff --git a/src/modules/city-pass/screens/Budget.screen.tsx b/src/modules/city-pass/screens/Budget.screen.tsx new file mode 100644 index 000000000..dd80f3813 --- /dev/null +++ b/src/modules/city-pass/screens/Budget.screen.tsx @@ -0,0 +1,49 @@ +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 {useRoute} from '@/hooks/navigation/useRoute' +import {useSetScreenTitle} from '@/hooks/navigation/useSetScreenTitle' +import {CityPassLoginBoundaryScreen} from '@/modules/city-pass/components/CityPassLoginBoundaryScreen' +import {TransactionHistory} from '@/modules/city-pass/components/TransactionHistory' +import {transactions} from '@/modules/city-pass/mocks/transactions' +import {CityPassRouteName} from '@/modules/city-pass/routes' +import {formatDate} from '@/utils/datetime/formatDate' +import {formatNumber} from '@/utils/formatNumber' + +export const BudgetScreen = () => { + const { + params: { + budget: {budget_assigned, budget_balance, expiry_date, omschrijving}, + }, + } = useRoute<CityPassRouteName.budget>() + + useSetScreenTitle('Ryan') + + return ( + <CityPassLoginBoundaryScreen testID="CityPassBalanceScreen"> + <Box> + <Column + gutter="lg" + halign="center"> + <Title + testID="CityPassBalanceTitleLabel" + text={omschrijving} + /> + <Title + testID="CityPassBalanceTitleValue" + text={formatNumber(budget_balance, true)} + /> + <Column halign="center"> + <Paragraph>{`Was in het begin ${formatNumber(budget_assigned, true)}.`}</Paragraph> + <Paragraph>{`Geldig tot en met ${formatDate(expiry_date)}.`}</Paragraph> + </Column> + <TransactionHistory + transactions={transactions.transacties} + type="budget" + /> + </Column> + </Box> + </CityPassLoginBoundaryScreen> + ) +} diff --git a/src/modules/city-pass/screens/CityPassDetails.screen.tsx b/src/modules/city-pass/screens/CityPassDetails.screen.tsx index 31b8d4248..59dad2b88 100644 --- a/src/modules/city-pass/screens/CityPassDetails.screen.tsx +++ b/src/modules/city-pass/screens/CityPassDetails.screen.tsx @@ -7,15 +7,101 @@ import {FigureWithFacadesBackground} from '@/components/ui/media/FigureWithFacad import {Phrase} from '@/components/ui/text/Phrase' import {Title} from '@/components/ui/text/Title' import {useNavigation} from '@/hooks/navigation/useNavigation' +import {useRoute} from '@/hooks/navigation/useRoute' import SportsImage from '@/modules/city-pass/assets/sports.svg' -import {BalanceButton} from '@/modules/city-pass/components/BalanceButton' +import {BudgetBalanceButton} from '@/modules/city-pass/components/BudgetBalanceButton' import {CityPassLoginBoundaryScreen} from '@/modules/city-pass/components/CityPassLoginBoundaryScreen' import {ShowCityPassButton} from '@/modules/city-pass/components/ShowCityPassButton' import {TransactionHistory} from '@/modules/city-pass/components/TransactionHistory' +import {cityPass} from '@/modules/city-pass/mocks/cityPass' import {CityPassRouteName} from '@/modules/city-pass/routes' +import {Transaction} from '@/modules/city-pass/types' +import {formatDate} from '@/utils/datetime/formatDate' + +const omschrijving = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + +const transactions: Transaction[] = [ + { + id: 1, + aanbieder: { + id: 1, + naam: 'Over het IJ Festival', + }, + bedrag: 104.95, + omschrijving, + transactiedatum: '2024-06-10T04:01:01.0000', + }, + { + id: 2, + aanbieder: { + id: 2, + naam: 'Stedelijk Museum Amsterdam', + }, + bedrag: 22.5, + omschrijving, + transactiedatum: '2024-06-10T04:01:01.0000', + }, + { + id: 3, + aanbieder: { + id: 3, + naam: 'ARTIS', + }, + bedrag: 29.95, + omschrijving, + transactiedatum: '2024-06-04T04:01:01.0000', + }, + { + id: 4, + aanbieder: { + id: 4, + naam: 'NEMO Science Museum', + }, + bedrag: 27.5, + omschrijving, + transactiedatum: '2024-05-22T04:01:01.0000', + }, + { + id: 5, + aanbieder: { + id: 5, + naam: 'Eye Filmmuseum', + }, + bedrag: 11.5, + omschrijving, + transactiedatum: '2024-05-22T04:01:01.0000', + }, + { + id: 6, + aanbieder: { + id: 2, + naam: 'Stedelijk Museum Amsterdam', + }, + bedrag: 22.5, + omschrijving, + transactiedatum: '2024-05-06T04:01:01.0000', + }, + { + id: 7, + aanbieder: { + id: 3, + naam: 'ARTIS', + }, + bedrag: 29.95, + omschrijving, + transactiedatum: '2024-02-16T04:01:01.0000', + }, +] export const CityPassDetailsScreen = () => { + const { + params: { + passOwner: {achternaam, passen, voornaam}, + }, + } = useRoute<CityPassRouteName.cityPassDetails>() const {navigate} = useNavigation() + const activePass = passen.find(pass => pass.actief) + const {expiry_date, pasnummer} = activePass ?? {} return ( <CityPassLoginBoundaryScreen testID="CityPassCityPassScreen"> @@ -25,16 +111,16 @@ export const CityPassDetailsScreen = () => { <SingleSelectable testID="CityPassCityPassDetailsName"> <Title testID="CityPassCityPassDetailsTitle" - text="Ryan" + text={voornaam} /> <Phrase emphasis="strong" testID="CityPassCityPassDetailsSubtitle"> - Huisman + {achternaam} </Phrase> </SingleSelectable> </Column> - <ShowCityPassButton passCount={3} /> + <ShowCityPassButton passCount={1} /> <Column gutter="md"> <SingleSelectable testID="CityPassCityPassDetailsPassNumber"> <Row @@ -47,7 +133,7 @@ export const CityPassDetailsScreen = () => { emphasis="strong" selectable testID="CityPassCityPassDetailsPassNumberValue"> - 6064 3660 1101 2605 999 + {pasnummer} </Phrase> </Row> </SingleSelectable> @@ -78,14 +164,22 @@ export const CityPassDetailsScreen = () => { <Phrase emphasis="strong" testID="CityPassCityPassDetailsExpiryDateValue"> - 31 juli 2024 + {expiry_date ? formatDate(expiry_date) : ''} </Phrase> </Row> </SingleSelectable> </Column> - <BalanceButton /> + {cityPass.budgetten.map(budget => ( + <BudgetBalanceButton + budget={budget} + key={budget.code} + /> + ))} <Box insetTop="md"> - <TransactionHistory /> + <TransactionHistory + transactions={transactions} + type="savings" + /> </Box> </Column> </Box> diff --git a/src/modules/city-pass/screens/Dashboard.screen.tsx b/src/modules/city-pass/screens/Dashboard.screen.tsx index 9d4f4b366..855990d16 100644 --- a/src/modules/city-pass/screens/Dashboard.screen.tsx +++ b/src/modules/city-pass/screens/Dashboard.screen.tsx @@ -1,114 +1,22 @@ import {useCallback} from 'react' -import {Alert} from 'react-native' import {Button} from '@/components/ui/buttons/Button' import {InformationButton} from '@/components/ui/buttons/InformationButton' import {Box} from '@/components/ui/containers/Box' import {AlertVariant} from '@/components/ui/feedback/alert/Alert.types' import {Column} from '@/components/ui/layout/Column' -import {Gutter} from '@/components/ui/layout/Gutter' import {FigureWithFacadesBackground} from '@/components/ui/media/FigureWithFacadesBackground' -import {SvgIconName} from '@/components/ui/media/svgIcons' -import {Paragraph} from '@/components/ui/text/Paragraph' import {Title} from '@/components/ui/text/Title' -import {useOpenWebUrl} from '@/hooks/linking/useOpenWebUrl' -import {useNavigation} from '@/hooks/navigation/useNavigation' +import {useOpenRedirect} from '@/hooks/linking/useOpenRedirect' import {useDispatch} from '@/hooks/redux/useDispatch' import SportsImage from '@/modules/city-pass/assets/sports.svg' -import {CityPassCard} from '@/modules/city-pass/components/CityPassCard' import {CityPassLoginBoundaryScreen} from '@/modules/city-pass/components/CityPassLoginBoundaryScreen' -import {ShowCityPassButton} from '@/modules/city-pass/components/ShowCityPassButton' -import {CityPassRouteName} from '@/modules/city-pass/routes' +import {PassOwners} from '@/modules/city-pass/components/PassOwners' +import {aboutBlocks} from '@/modules/city-pass/constants' import {resetCityPass} from '@/modules/city-pass/slice' -import {CityPass} from '@/modules/city-pass/types' -import {useGetRedirectUrlsQuery} from '@/modules/redirects/service' -import {RedirectKey} from '@/modules/redirects/types' import {devLog} from '@/processes/development' -import {useTrackException} from '@/processes/logging/hooks/useTrackException' -import {ExceptionLogKey} from '@/processes/logging/types' import {useAlert} from '@/store/slices/alert' -type AboutBlock = { - icon: SvgIconName - redirectKey: RedirectKey - testID: string - text: string - title: string -} - -const aboutBlocks: AboutBlock[] = [ - { - icon: 'list', - redirectKey: RedirectKey.citypass, - title: 'Bekijk het aanbod', - text: 'Gratis of met hoge korting sporten, naar de bioscoop, het theater, of het museum.', - testID: 'CityPassOverviewLink', - }, - { - icon: 'child', - redirectKey: RedirectKey.cityPassChildBudget, - title: 'Over het kindtegoed', - text: 'Kinderen tot en met 17 jaar krijgen Kindtegoed op hun Stadspas. ', - testID: 'CityPassChildBudgetLink', - }, - { - icon: 'question-mark-circle', - redirectKey: RedirectKey.cityPassUsage, - title: 'Zo werkt je Stadspas', - text: 'Lees meer over wat de Stadspas is en hoe het werkt.', - testID: 'CityPassUsageLink', - }, -] - -const cityPasses: CityPass[] = [ - { - actief: true, - eigenaar: 'Mirjam', - balance_update_time: new Date('2020-04-02T12:45:41.000Z'), - budgetten: [ - { - code: 'AMSTEG_10-14', - naam: 'Kindtegoed 10-14', - omschrijving: 'Kindtegoed', - expiry_date: new Date('2021-08-31T21:59:59.000Z'), - budget_assigned: 150, - budget_balance: 0, - }, - { - code: 'AMSTEG_06-30', - naam: 'Kindtegoed 30-06', - omschrijving: 'Kindtegoed', - expiry_date: new Date('2021-08-31T21:59:59.000Z'), - budget_assigned: 75, - budget_balance: 0, - }, - ], - budgetten_actief: true, - categorie: 'Amsterdamse Digitale Stadspas', - categorie_code: 'A', - expiry_date: new Date('2020-08-31T23:59:59.000Z'), - id: 999999, - originele_pas: { - categorie: 'Amsterdamse Digitale Stadspas', - categorie_code: 'A', - id: 888888, - pasnummer: 8888888888888, - pasnummer_volledig: '8888888888888888888', - passoort: { - id: 11, - naam: 'Digitale Stadspas', - }, - }, - pasnummer: 6666666666666, - pasnummer_volledig: '6666666666666666666', - passoort: { - id: 11, - naam: 'Digitale Stadspas', - }, - }, -] - export const DashboardScreen = () => { - const {navigate} = useNavigation() const {setAlert} = useAlert() const dispatch = useDispatch() const logout = useCallback(() => { @@ -123,71 +31,13 @@ export const DashboardScreen = () => { testID: 'CityPassLoggedOutAlert', }) }, [dispatch, setAlert]) - const openWebUrl = useOpenWebUrl() - const {data: redirectUrls} = useGetRedirectUrlsQuery() - const trackException = useTrackException() - - const openRedirect = (redirectKey: RedirectKey) => { - if (redirectUrls?.[redirectKey]) { - openWebUrl(redirectUrls[redirectKey]) - } else { - Alert.alert('Sorry, deze functie is niet beschikbaar.') - trackException(ExceptionLogKey.redirectNotFound, 'Redirects.tsx', { - urlKey: redirectKey, - }) - } - } + const openRedirect = useOpenRedirect() return ( <CityPassLoginBoundaryScreen hasStickyAlert testID="CityPassDashboardScreen"> - <Box - insetBottom="xl" - insetHorizontal="md" - insetTop="md"> - {cityPasses.length === 0 ? ( - <> - <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" - /> - </> - ) : ( - <Column gutter="md"> - <ShowCityPassButton passCount={cityPasses.length} /> - <Gutter height="sm" /> - {cityPasses.map(({eigenaar, pasnummer}) => ( - <CityPassCard - key={pasnummer} - onPress={() => - navigate(CityPassRouteName.cityPassDetails, { - passNumber: pasnummer, - }) - } - testID={pasnummer.toString()} - title={`Stadspas details van ${eigenaar}`} - /> - ))} - </Column> - )} - </Box> + <PassOwners logout={logout} /> <Box insetHorizontal="md" insetVertical="xl" diff --git a/src/modules/city-pass/types.ts b/src/modules/city-pass/types.ts index 1ae1c7bdf..4b5115585 100644 --- a/src/modules/city-pass/types.ts +++ b/src/modules/city-pass/types.ts @@ -1,32 +1,37 @@ +import {SvgIconName} from '@/components/ui/media/svgIcons' +import {RedirectKey} from '@/modules/redirects/types' + export enum CityPassEndpointName { getCityPasses = 'getCityPasses', } -export type CityPass = { +export type CityPassBase = { actief: boolean - balance_update_time: Date - budgetten: Budget[] - budgetten_actief: boolean + budgetten: BudgetBase[] categorie: string categorie_code: string - eigenaar: string - expiry_date: Date + expiry_date: string id: number - originele_pas: OriginalPass pasnummer: number pasnummer_volledig: string passoort: PassType } +export type CityPass = CityPassBase & { + balance_update_time: Date + budgetten_actief: boolean + eigenaar: string + originele_pas: OriginalPass +} -export type Budget = { +export type Budget = BudgetBase & { budget_assigned: number budget_balance: number - code: string - expiry_date: Date - naam: string + expiry_date: string omschrijving: string } +export type BudgetBase = {code: string; naam: string} + export type OriginalPass = { categorie: string categorie_code: string @@ -44,20 +49,35 @@ export type PassType = { export type PassOwner = { achternaam: string initialen: string - passen: { - actief: boolean - pasnummer: number - }[] + passen: CityPassBase[] voornaam: string } export type Transaction = { - aanbieder: { - id: number - naam: string - } + aanbieder?: TransActionSupplier bedrag: number + budget?: TransactionBudget id: number omschrijving?: string transactiedatum: string } + +type TransactionBudget = { + aanbieder: TransActionSupplier + code: string + id: number + naam: string +} + +type TransActionSupplier = { + id: number + naam: string +} + +export type AboutBlock = { + icon: SvgIconName + redirectKey: RedirectKey + testID: string + text: string + title: string +}