[cases] updated claim filing flow (#87)

* [feat] starting toggle * [feat] added toggle styling and functionality * [refactor] add text * [refactor] toggle * [refactor] update options styling * [fix] move down status bar * [feat] file claim flow added * [refactor] make a separate check eligibility button component. * [refactor] lift useState out of toggle options component. * [refactor] create eligibility filing options button. * [feat] configure toggle to switch between eligibility options. * [style] fix check eligibility button component styling. * [feat] add claim filing behavior. * [feat] claim status component * [fix] space styling * [cleanup] fix loading issues. --------- Co-authored-by: Ronnie Beggs <[email protected]>
calblueprint · May 1, 2024 · 8cee844 · 8cee844
1 parent b2a5da2
commit 8cee844
Show file tree

Hide file tree

Showing 21 changed files with 685 additions and 181 deletions.
diff --git a/assets/circle-check-black.svg b/assets/circle-check-black.svg
diff --git a/assets/document-add.svg b/assets/document-add.svg
diff --git a/assets/double-checkbox.svg b/assets/double-checkbox.svg
diff --git a/assets/file-claim-small.svg b/assets/file-claim-small.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Components/CheckEligibilityButton/CheckEligibilityButton.tsx b/src/Components/CheckEligibilityButton/CheckEligibilityButton.tsx
@@ -0,0 +1,39 @@
+import { router } from 'expo-router';
+import React from 'react';
+import { View, Text } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import styles from './styles';
+import CheckEligibility from '../../../assets/check-eligibility.svg';
+import Arrow from '../../../assets/next.svg';
+import globalStyles from '../../styles/global';
+import { CaseUid } from '../../types/types';
+
+interface CheckEligibilityProps {
+  caseUid: CaseUid;
+}
+
+export default function CheckEligibilityButton({
+  caseUid,
+}: CheckEligibilityProps) {
+  return (
+    <TouchableOpacity
+      style={[styles.buttonContainer, globalStyles.shadowBorder]}
+      onPress={() => {
+        router.push(`/AllCases/EligibilityForm/${caseUid}`);
+      }}
+    >
+      <CheckEligibility />
+      <View style={styles.rightContainer}>
+        <View style={styles.topRow}>
+          <Text style={styles.headerText}>Check eligibility</Text>
+          <Arrow />
+        </View>
+        <Text style={styles.bodyText}>
+          Check your eligibility for this case if you would like to file a claim
+          or opt out.
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+}
diff --git a/src/Components/CheckEligibilityButton/styles.ts b/src/Components/CheckEligibilityButton/styles.ts
@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+
+import { colors } from '../../styles/colors';
+
+export default StyleSheet.create({
+  buttonContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    columnGap: 12,
+    padding: 20,
+  },
+  rightContainer: {
+    flexDirection: 'column',
+    flex: 1,
+    rowGap: 15,
+  },
+  topRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottomWidth: 0.5,
+    borderBottomColor: colors.midGrey,
+    paddingBottom: 5,
+  },
+  headerText: {
+    fontSize: 20,
+    fontStyle: 'normal',
+    fontWeight: '600',
+    lineHeight: 21,
+    color: colors.black,
+  },
+  bodyText: {
+    fontSize: 14,
+    fontStyle: 'normal',
+    fontWeight: '300',
+    lineHeight: 16,
+    color: colors.black,
+  },
+});
diff --git a/src/Components/ClaimStatusBar/ClaimStatusBar.tsx b/src/Components/ClaimStatusBar/ClaimStatusBar.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+
+import styles from './styles';
+import CircleCheck from '../../../assets/circle-check-black.svg';
+import { getStatusColor } from '../../app/(BottomTabNavigation)/AllCases/utils';
+import globalStyles from '../../styles/global';
+
+interface ClaimStatusBarProps {
+  status: string;
+}
+
+export default function CaseStatusBar({ status }: ClaimStatusBarProps) {
+  const statusColor = getStatusColor(status);
+  return (
+    <View style={[styles.container, globalStyles.shadowBorder]}>
+      <Text style={styles.claimText}>Claim Status:</Text>
+      <View style={[statusColor.background, styles.statusContainer]}>
+        <CircleCheck style={styles.icon} />
+        <Text style={[styles.statusText]}>{status}</Text>
+      </View>
+    </View>
+  );
+}
diff --git a/src/Components/ClaimStatusBar/styles.ts b/src/Components/ClaimStatusBar/styles.ts
@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+
+import { colors } from '../../styles/colors';
+export default StyleSheet.create({
+  container: {
+    height: 47,
+    width: '100%',
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+  },
+  statusContainer: {
+    height: 29,
+    width: 177,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    border: 'solid',
+    borderWidth: 0.3,
+    borderRadius: 5,
+  },
+  claimText: {
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: '300',
+    lineHeight: 21,
+    color: colors.black,
+  },
+  statusText: {
+    fontSize: 18,
+    fontStyle: 'normal',
+    fontWeight: '500',
+    lineHeight: 21,
+  },
+  icon: {
+    marginRight: 10,
+  },
+});
diff --git a/src/Components/EligibilityCard/EligibilityCard.tsx b/src/Components/EligibilityCard/EligibilityCard.tsx
@@ -1,124 +1,42 @@
-import { router } from 'expo-router';
-import React from 'react';
-import { View, Text } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import React, { useState } from 'react';
+import { View } from 'react-native';
 
 import styles from './styles';
-import CheckEligibility from '../../../assets/check-eligibility.svg';
-import Fileclaim from '../../../assets/file-claim.svg';
-import Arrow from '../../../assets/next.svg';
-import OptOut from '../../../assets/opt-out.svg';
-import { openUrl } from '../../app/(BottomTabNavigation)/AllCases/utils';
-import globalStyles from '../../styles/global';
-import { Case, Eligibility } from '../../types/types';
+import { CaseUid } from '../../types/types';
+import EligibleFilingButton from '../EligibilityFilingButton/EligibilityFilingButton';
+import ToggleOptionsButton from '../ToggleOptionsButton/ToggleOptionsButton';
 
 interface EligibilityCardProps {
-  caseData: Case;
-  status: Eligibility;
+  caseUid: CaseUid;
 }
 
-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 EligibilityCard({
-  caseData,
-  status,
+export default function EligibleFilingOptions({
+  caseUid,
 }: EligibilityCardProps) {
-  if (
-    status === Eligibility.INELIGIBLE ||
-    status === Eligibility.UNDETERMINED
-  ) {
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity
-          style={[styles.buttonContainer, globalStyles.shadowBorder]}
-          onPress={() => {
-            router.push({
-              pathname: `/AllCases/EligibilityForm/${caseData.id}`,
-            });
-          }}
-        >
-          <View style={styles.leftContainer}>
-            <CheckEligibility />
-          </View>
-          <View style={styles.middleContainer}>
-            <Text style={styles.headerText}>Check eligibility</Text>
-            <Text style={styles.bodyText}>
-              Check your eligibility for this case if you would like to file a
-              claim or opt out.
-            </Text>
-          </View>
-          <View style={styles.rightContainer}>
-            <Arrow />
-          </View>
-        </TouchableOpacity>
-      </View>
-    );
-  } else if (status === Eligibility.ELIGIBLE) {
-    const claimLink = caseData.claimLink
-      ? ensureURLFormat(caseData.claimLink)
-      : null;
-    const onPressHandler = claimLink ? () => openUrl(claimLink) : undefined;
-
-    return (
-      <View style={styles.container}>
-        <TouchableOpacity
-          style={[styles.buttonContainer, globalStyles.shadowBorder]}
-          onPress={onPressHandler}
-        >
-          <View style={styles.leftContainer}>
-            <Fileclaim />
-          </View>
-          <View style={styles.middleContainer}>
-            <Text style={styles.headerText}>File a case claim</Text>
-            <Text style={styles.bodyText}>
-              Eligible class members can submit a claim electronically to
-              receive a settlement.
-            </Text>
-          </View>
-          <View style={styles.rightContainer}>
-            <Arrow />
-          </View>
-        </TouchableOpacity>
+  const [isFileClaimSelected, setSelected] = useState<boolean>(true);
 
-        <View style={styles.separatorComponent}>
-          <View style={styles.horizontalLine} />
-          <View style={styles.textContainer}>
-            <Text style={styles.separatorText}>OR</Text>
-          </View>
-          <View style={styles.horizontalLine} />
-        </View>
+  return (
+    <View style={styles.container}>
+      <ToggleOptionsButton
+        isDefaultSelected={isFileClaimSelected}
+        setSelected={setSelected}
+      />
 
-        <TouchableOpacity
-          style={[styles.buttonContainer, globalStyles.shadowBorder]}
-          onPress={() => {
-            router.push({
-              pathname: `/AllCases/OptOut/${caseData.id}`,
-            });
-          }}
-        >
-          <View style={styles.leftContainer}>
-            <OptOut />
-          </View>
-          <View style={styles.middleContainer}>
-            <Text style={styles.headerText}>Opt out of case</Text>
-            <Text style={styles.bodyText}>
-              Opt out of this case to do something you can still file private
-              claim yada yada
-            </Text>
-          </View>
-          <View style={styles.rightContainer}>
-            <Arrow />
-          </View>
-        </TouchableOpacity>
-      </View>
-    );
-  } else {
-    return <View />;
-  }
+      {isFileClaimSelected ? (
+        <EligibleFilingButton
+          mainText="Eligible class members can submit a claim electronically to
+        receive a settlement."
+          instructionText="File or update my claim"
+          route={`/AllCases/FileClaim/${caseUid}`}
+        />
+      ) : (
+        <EligibleFilingButton
+          mainText="Opt out to remove yourself from this class action and deactivate
+          this case."
+          instructionText="View options for opting out"
+          route={`/AllCases/OptOut/${caseUid}`}
+        />
+      )}
+    </View>
+  );
 }