From e547d3a31d669225ef014ccfc6b73798dc7ea076 Mon Sep 17 00:00:00 2001 From: Arfa Momin Date: Thu, 25 Apr 2024 11:33:53 -0700 Subject: [PATCH] [feat] file claim flow added --- assets/document-add.svg | 3 + assets/double-checkbox.svg | 3 + assets/file-claim-small.svg | 3 + .../EligibilityCard/EligibilityCard.tsx | 6 +- .../AllCases/CaseScreen/[caseUid].tsx | 8 +- .../AllCases/FileClaim/[caseUid].tsx | 111 ++++++++++++++++++ .../AllCases/FileClaim/styles.ts | 83 +++++++++++++ 7 files changed, 212 insertions(+), 5 deletions(-) create mode 100644 assets/document-add.svg create mode 100644 assets/double-checkbox.svg create mode 100644 assets/file-claim-small.svg create mode 100644 src/app/(BottomTabNavigation)/AllCases/FileClaim/[caseUid].tsx create mode 100644 src/app/(BottomTabNavigation)/AllCases/FileClaim/styles.ts diff --git a/assets/document-add.svg b/assets/document-add.svg new file mode 100644 index 00000000..96fc1c5e --- /dev/null +++ b/assets/document-add.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/double-checkbox.svg b/assets/double-checkbox.svg new file mode 100644 index 00000000..31fd21e8 --- /dev/null +++ b/assets/double-checkbox.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/file-claim-small.svg b/assets/file-claim-small.svg new file mode 100644 index 00000000..67295c70 --- /dev/null +++ b/assets/file-claim-small.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Components/EligibilityCard/EligibilityCard.tsx b/src/Components/EligibilityCard/EligibilityCard.tsx index ed93d59f..3a2cb0f0 100644 --- a/src/Components/EligibilityCard/EligibilityCard.tsx +++ b/src/Components/EligibilityCard/EligibilityCard.tsx @@ -69,7 +69,11 @@ export default function EligibilityCard({ { + router.push({ + pathname: `/AllCases/FileClaim/${caseData.id}`, + }); + }} > diff --git a/src/app/(BottomTabNavigation)/AllCases/CaseScreen/[caseUid].tsx b/src/app/(BottomTabNavigation)/AllCases/CaseScreen/[caseUid].tsx index c1a7ce31..513862bc 100644 --- a/src/app/(BottomTabNavigation)/AllCases/CaseScreen/[caseUid].tsx +++ b/src/app/(BottomTabNavigation)/AllCases/CaseScreen/[caseUid].tsx @@ -58,10 +58,6 @@ function CaseScreen() { {caseData.title} - {status === Eligibility.ELIGIBLE && ( @@ -72,6 +68,10 @@ function CaseScreen() { status === Eligibility.UNDETERMINED) && ( )} + diff --git a/src/app/(BottomTabNavigation)/AllCases/FileClaim/[caseUid].tsx b/src/app/(BottomTabNavigation)/AllCases/FileClaim/[caseUid].tsx new file mode 100644 index 00000000..b605671a --- /dev/null +++ b/src/app/(BottomTabNavigation)/AllCases/FileClaim/[caseUid].tsx @@ -0,0 +1,111 @@ +import { router, useLocalSearchParams } from 'expo-router'; +import React, { useEffect, useState } from 'react'; +import { View, Text, TouchableOpacity } from 'react-native'; + +import styles from './styles'; +import BlackRightArrow from '../../../../../assets/black-right-arrow.svg'; +import Document from '../../../../../assets/document-add.svg'; +import Checkbox from '../../../../../assets/double-checkbox.svg'; +import Fileclaim from '../../../../../assets/file-claim-small.svg'; +import RightWhiteArrow from '../../../../../assets/right-arrow-white.svg'; +import { getCaseById } from '../../../../supabase/queries/cases'; +import { Case, CaseUid } from '../../../../types/types'; +import { openUrl } from '../utils'; + +const ensureURLFormat = (url: string | null | undefined) => { + if (!url) return null; + if (url.startsWith('http://') || url.startsWith('https://')) { + return url; + } + return `https://${url}`; +}; + +export default function FileClaimScreen() { + const { caseUid } = useLocalSearchParams<{ caseUid: CaseUid }>(); + const [caseData, setCaseData] = useState(); + + async function fetchCaseData() { + if (caseUid) { + const caseData = await getCaseById(caseUid); + setCaseData(caseData); + } + } + + useEffect(() => { + fetchCaseData(); + }, []); + + const claimLink = caseData?.claimLink + ? ensureURLFormat(caseData.claimLink) + : null; + const onPressHandler = claimLink ? () => openUrl(claimLink) : undefined; + + return ( + + {caseData === undefined ? ( + Loading... + ) : ( + + + Filing a claim + + + + + + Filing a claim commits you to the class action and any + potential compensation awarded + + + + + + + + + + Complete the required claim form on the official claim + filing site to submit your claim + + + + + + + + + + Come back to this screen to update your claim filing status + + + + + + + + + + Take me to claim filing site + + + + + router.push(`/AllCases/OptOut/ConfirmOptOut/${caseUid}`) + } + > + + I’ve already filed a claim! + + + + + + )} + + ); +} diff --git a/src/app/(BottomTabNavigation)/AllCases/FileClaim/styles.ts b/src/app/(BottomTabNavigation)/AllCases/FileClaim/styles.ts new file mode 100644 index 00000000..12ed8b75 --- /dev/null +++ b/src/app/(BottomTabNavigation)/AllCases/FileClaim/styles.ts @@ -0,0 +1,83 @@ +import { StyleSheet } from 'react-native'; + +import { colors } from '../../../../styles/colors'; + +export default StyleSheet.create({ + container: { + flex: 1, + backgroundColor: colors.white, + alignItems: 'center', + rowGap: 10, + }, + screenContainer: { + width: '85%', + height: '95%', + justifyContent: 'space-between', + whiteSpace: 'pre-line', + }, + contentContainer: { + flexDirection: 'column', + rowGap: 34, + marginTop: 40, + }, + infoContainer: { + flexDirection: 'column', + rowGap: 20, + }, + buttonsContainer: { + flexDirection: 'column', + rowGap: 12, + }, + buttonBase: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + width: '100%', + height: 47, + paddingHorizontal: 20, + borderRadius: 5, + borderWidth: 1, + }, + buttonWhite: { + backgroundColor: colors.white, + borderColor: colors.black, + }, + buttonBlack: { + backgroundColor: colors.black, + }, + titleText: { + fontSize: 38, + fontWeight: '800', + }, + textContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'flex-start', + flex: 1, + }, + buttonText: { + fontSize: 17, + fontStyle: 'normal', + fontWeight: '400', + }, + infoText: { + fontSize: 16, + fontStyle: 'normal', + fontWeight: '300', + color: colors.darkGrey, + flexWrap: 'wrap', + }, + blackText: { + color: colors.black, + }, + whiteText: { + color: colors.white, + }, + textIconContainer: { + flexDirection: 'row', + alignItems: 'center', + }, + icon: { + marginRight: 24, + }, +});