[feat] file claim flow added

src/Components/EligibilityCard/EligibilityCard.tsx

@@ -69,7 +69,11 @@ export default function EligibilityCard({
       <View style={styles.container}>
         <TouchableOpacity
           style={[styles.buttonContainer, globalStyles.shadowBorder]}
-          onPress={onPressHandler}
+          onPress={() => {
+            router.push({
+              pathname: `/AllCases/FileClaim/${caseData.id}`,
+            });
+          }}
         >
           <View style={styles.topContainer}>
             <View style={styles.leftContainer}>

src/app/(BottomTabNavigation)/AllCases/CaseScreen/[caseUid].tsx

@@ -58,10 +58,6 @@ function CaseScreen() {
           <View style={styles.titleContainer}>
             <Text style={styles.title}>{caseData.title}</Text>
           </View>
-          <StatusUpdatesBar
-            caseUid={caseData.id}
-            status={caseData.caseStatus}
-          />
           <ToggleOptionsButton />
 
           {status === Eligibility.ELIGIBLE && (
@@ -72,6 +68,10 @@ function CaseScreen() {
             status === Eligibility.UNDETERMINED) && (
             <EligibilityCard caseData={caseData} status={status} />
           )}
+          <StatusUpdatesBar
+            caseUid={caseData.id}
+            status={caseData.caseStatus}
+          />
           <FormsCard {...caseData} />
           <EducationalBar />
         </ScrollView>

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<Case>();
+
+  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 (
+    <View style={styles.container}>
+      {caseData === undefined ? (
+        <Text>Loading...</Text>
+      ) : (
+        <View style={styles.screenContainer}>
+          <View style={styles.contentContainer}>
+            <Text style={styles.titleText}>Filing a claim</Text>
+            <View style={styles.infoContainer}>
+              <View style={styles.textIconContainer}>
+                <Fileclaim style={styles.icon} />
+                <View style={styles.textContainer}>
+                  <Text style={styles.infoText}>
+                    Filing a claim commits you to the class action and any
+                    potential compensation awarded
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View style={styles.infoContainer}>
+              <View style={styles.textIconContainer}>
+                <Document style={styles.icon} />
+                <View style={styles.textContainer}>
+                  <Text style={styles.infoText}>
+                    Complete the required claim form on the official claim
+                    filing site to submit your claim
+                  </Text>
+                </View>
+              </View>
+            </View>
+            <View style={styles.infoContainer}>
+              <View style={styles.textIconContainer}>
+                <Checkbox style={styles.icon} />
+                <View style={styles.textContainer}>
+                  <Text style={styles.infoText}>
+                    Come back to this screen to update your claim filing status
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+
+          <View style={styles.buttonsContainer}>
+            <TouchableOpacity
+              style={[styles.buttonBase, styles.buttonWhite]}
+              onPress={onPressHandler}
+            >
+              <Text style={[styles.buttonText, styles.blackText]}>
+                Take me to claim filing site
+              </Text>
+              <BlackRightArrow />
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.buttonBase, styles.buttonBlack]}
+              onPress={() =>
+                router.push(`/AllCases/OptOut/ConfirmOptOut/${caseUid}`)
+              }
+            >
+              <Text style={[styles.buttonText, styles.whiteText]}>
+                I’ve already filed a claim!
+              </Text>
+              <RightWhiteArrow />
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

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,
+  },
+});