submenu buttons

trevorpfiz · Dec 30, 2023 · 0e349b2 · 0e349b2
1 parent 5618b37
commit 0e349b2
Show file tree

Hide file tree

Showing 31 changed files with 531 additions and 163 deletions.
diff --git a/apps/expo/assets/splash.png b/apps/expo/assets/splash.png
diff --git a/apps/expo/package.json b/apps/expo/package.json
@@ -65,6 +65,7 @@
     "expo-web-browser": "^12.3.2",
     "jotai": "^2.6.0",
     "lucide-react-native": "^0.294.0",
+    "moti": "^0.27.2",
     "nativewind": "^4.0.16",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/apps/expo/src/app/(main)/index.tsx b/apps/expo/src/app/(main)/index.tsx
@@ -23,7 +23,8 @@ const Index = () => {
   const [, setPatientName] = useAtom(patientNameAtom);
   const [userJourney, setUserJourney] = useAtom(userJourneyAtom);
   const router = useRouter();
-
+  console.log(patientId);
+  console.log(userJourney);
   if (patientId) {
     if (userJourney === UserJourney.Onboarding) {
       return <Redirect href="/onboarding/overview" />;
@@ -43,9 +44,6 @@ const Index = () => {
           <Text className="pb-4 text-center text-5xl font-semibold text-black">
             Hello there!
           </Text>
-          <Text className="pb-4 text-center text-2xl text-black">
-            {patientId || "No patient ID found."}
-          </Text>
           <Text className="pb-4 text-center text-2xl text-black">
             Ready to get your life back?
           </Text>

diff --git a/apps/expo/src/app/(main)/onboarding/_layout.tsx b/apps/expo/src/app/(main)/onboarding/_layout.tsx
@@ -14,12 +14,8 @@ export default function OnboardingLayout() {
   const [userJourney] = useAtom(userJourneyAtom);
 
   if (patientId) {
-    if (userJourney === UserJourney.Confirmation) {
-      return <Redirect href="/onboarding/confirmation" />;
-    } else if (userJourney === UserJourney.Portal) {
+    if (userJourney === UserJourney.Portal) {
       return <Redirect href="/(main)/portal/(tabs)" />;
-    } else if (userJourney === "") {
-      return <Redirect href="/" />;
     }
   }
 

diff --git a/apps/expo/src/app/(main)/onboarding/confirmation.tsx b/apps/expo/src/app/(main)/onboarding/confirmation.tsx
@@ -25,8 +25,6 @@ export default function ConfirmationPage() {
       return <Redirect href="/onboarding/overview" />;
     } else if (userJourney === UserJourney.Portal) {
       return <Redirect href="/(main)/portal/(tabs)" />;
-    } else if (userJourney === "") {
-      return <Redirect href="/" />;
     }
   }
 

diff --git a/apps/expo/src/app/(main)/onboarding/medical-history/allergies.tsx b/apps/expo/src/app/(main)/onboarding/medical-history/allergies.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { useRouter } from "expo-router";
+import { SafeAreaView } from "react-native";
+import { Stack, useRouter } from "expo-router";
 
 import { AllergiesForm } from "~/components/forms/allergies-form";
 import { useStepStatusUpdater } from "~/hooks/use-step-status-updater";
@@ -9,16 +10,22 @@ export default function AllergiesFormPage() {
   const router = useRouter();
 
   return (
-    <>
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <Stack.Screen
+        options={{
+          title: "Allergies",
+          headerTitleAlign: "center",
+        }}
+      />
       <AllergiesForm
         onSuccess={() => {
           // Update the allergies step as complete
           updater.markStepAsComplete("allergies");
 
-          // Go to the next step in onboarding
+          // Go back to the medical history page
           router.back();
         }}
       />
-    </>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/src/app/(main)/onboarding/medical-history/conditions.tsx b/apps/expo/src/app/(main)/onboarding/medical-history/conditions.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { useRouter } from "expo-router";
+import { SafeAreaView } from "react-native";
+import { Stack, useRouter } from "expo-router";
 
 import { ConditionsForm } from "~/components/forms/conditions-form";
 import { useStepStatusUpdater } from "~/hooks/use-step-status-updater";
@@ -9,16 +10,22 @@ export default function ConditionsFormPage() {
   const router = useRouter();
 
   return (
-    <>
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <Stack.Screen
+        options={{
+          title: "Allergies",
+          headerTitleAlign: "center",
+        }}
+      />
       <ConditionsForm
         onSuccess={() => {
           // Update the conditions step as complete
           updater.markStepAsComplete("conditions");
 
-          // Go to the next step in onboarding
+          // Go back to the medical history page
           router.back();
         }}
       />
-    </>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/src/app/(main)/onboarding/medical-history/medications.tsx b/apps/expo/src/app/(main)/onboarding/medical-history/medications.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { useRouter } from "expo-router";
+import { SafeAreaView } from "react-native";
+import { Stack, useRouter } from "expo-router";
 
 import { MedicationsForm } from "~/components/forms/medications-form";
 import { useStepStatusUpdater } from "~/hooks/use-step-status-updater";
@@ -9,16 +10,22 @@ export default function MedicationsFormPage() {
   const router = useRouter();
 
   return (
-    <>
+    <SafeAreaView className="flex-1 bg-gray-50">
+      <Stack.Screen
+        options={{
+          title: "Allergies",
+          headerTitleAlign: "center",
+        }}
+      />
       <MedicationsForm
         onSuccess={() => {
           // Update the medications step as complete
           updater.markStepAsComplete("medications");
 
-          // Go to the next step in onboarding
+          // Go back to the medical history page
           router.back();
         }}
       />
-    </>
+    </SafeAreaView>
   );
 }
diff --git a/apps/expo/src/app/(main)/portal/(tabs)/account/billing.tsx b/apps/expo/src/app/(main)/portal/(tabs)/account/billing.tsx
@@ -22,36 +22,48 @@ export default function Billing() {
     return <LoaderComponent />;
   }
 
+  if (billingQuery.isError) {
+    return <Text>Error: {billingQuery.error?.message}</Text>;
+  }
+
+  if (!billingQuery.data || billingQuery.data.total === 0) {
+    return (
+      <View className="flex-1 bg-gray-100">
+        <Text className="p-8">No billing statements found.</Text>
+      </View>
+    );
+  }
+
   return (
-    <View className="flex flex-col gap-4">
-      {billingQuery.data &&
-        billingQuery.data.total > 0 &&
-        billingQuery.data.entry?.map((bill, index) => (
-          <TouchableOpacity
-            key={index}
-            onPress={() =>
-              router.push({
-                pathname: "/portal/(modals)/pdf",
-                params: {
-                  url: bill.resource?.content?.[0]?.attachment.url ?? "",
-                },
-              })
-            }
-          >
-            <View className="flex flex-row items-center justify-between border-b border-gray-200 bg-white py-8 pl-8 pr-4">
-              <View className="flex justify-between">
-                <Text className="text-lg font-medium">Medical Bill</Text>
-                <Text>
-                  {bill.resource?.date
-                    ? formatDateTime(bill.resource.date)
-                    : "Unknown date"}
-                </Text>
-              </View>
-
-              <ChevronRight size={20} strokeWidth={2} color="blue" />
+    <View className="flex-1 bg-gray-100">
+      {billingQuery.data.entry?.map((bill) => (
+        <TouchableOpacity
+          key={bill.resource.id} // Use a unique identifier if available
+          onPress={() =>
+            router.push({
+              pathname: "/portal/pdf",
+              params: {
+                url: bill.resource?.content?.[0]?.attachment.url ?? "",
+              },
+            })
+          }
+          accessibilityRole="button"
+          accessibilityLabel="View bill"
+        >
+          <View className="flex flex-row items-center justify-between border-b border-gray-200 bg-white py-8 pl-8 pr-4">
+            <View className="flex justify-between">
+              <Text className="text-lg font-medium">Medical Bill</Text>
+              <Text>
+                {bill.resource?.date
+                  ? formatDateTime(bill.resource.date)
+                  : "Unknown date"}
+              </Text>
             </View>
-          </TouchableOpacity>
-        ))}
+
+            <ChevronRight size={20} strokeWidth={2} color="blue" />
+          </View>
+        </TouchableOpacity>
+      ))}
     </View>
   );
 }
diff --git a/apps/expo/src/app/(main)/portal/(tabs)/health-record/forms/clinical-notes.tsx b/apps/expo/src/app/(main)/portal/(tabs)/health-record/forms/clinical-notes.tsx
@@ -34,7 +34,7 @@ export default function ClinicalNotes() {
             key={index}
             onPress={() =>
               router.push({
-                pathname: "/portal/(modals)/pdf",
+                pathname: "/portal/pdf",
                 params: {
                   url: note.resource?.content?.[0]?.attachment.url ?? "",
                 },

diff --git a/apps/expo/src/app/(main)/portal/(tabs)/health-record/test-results/[testId].tsx b/apps/expo/src/app/(main)/portal/(tabs)/health-record/test-results/[testId].tsx
@@ -78,7 +78,7 @@ export default function TestPage() {
         <TouchableOpacity
           onPress={() =>
             router.push({
-              pathname: "/portal/(modals)/pdf",
+              pathname: "/portal/pdf",
               params: {
                 url: diagnosticReportItem.presentedForm?.[0]?.url ?? "",
               },

diff --git a/apps/expo/src/app/(main)/portal/(tabs)/index.tsx b/apps/expo/src/app/(main)/portal/(tabs)/index.tsx
@@ -5,6 +5,7 @@ import { patientIdAtom, patientNameAtom } from "~/app/(main)";
 import NextAppointment from "~/components/next-appointment";
 import Tasks from "~/components/tasks";
 import { LoaderComponent } from "~/components/ui/loader";
+import SubmenuButtons from "~/components/ui/rn-ui/components/ui/submenu-buttons";
 import { api } from "~/utils/api";
 
 export default function Home() {
@@ -32,18 +33,25 @@ export default function Home() {
   }
 
   return (
-    <View className="flex-1 flex-col gap-8 bg-gray-100">
+    <View className="flex-1 flex-col gap-4 bg-gray-100">
       {/* Welcome message */}
-      <View className="bg-white px-6 py-8">
-        <Text className="text-3xl font-semibold">
+      <View className="bg-white px-6 py-6">
+        <Text className="text-3xl font-semibold text-black">
           Good to see you, {patientName.firstName || "User"}
         </Text>
       </View>
 
       {/* Next appointment */}
-      <View className="px-6">
+      <View className="flex-col gap-2 px-6">
+        <Text className="text-xl font-semibold text-black">
+          Your next appointment
+        </Text>
         <NextAppointment />
       </View>
+      {/* Submenu buttons */}
+      <View>
+        <SubmenuButtons />
+      </View>
       {/* Tasks */}
       <View className="pb-2">
         <Tasks />

diff --git a/apps/expo/src/app/(main)/portal/_layout.tsx b/apps/expo/src/app/(main)/portal/_layout.tsx
@@ -22,8 +22,6 @@ export default function PortalLayout() {
       return <Redirect href="/onboarding/overview" />;
     } else if (userJourney === UserJourney.Confirmation) {
       return <Redirect href="/onboarding/confirmation" />;
-    } else if (userJourney === "") {
-      return <Redirect href="/" />;
     }
   }
 

diff --git a/apps/expo/src/components/forms/allergies-form.tsx b/apps/expo/src/components/forms/allergies-form.tsx
@@ -141,7 +141,7 @@ export const AllergiesForm = (props: { onSuccess?: () => void }) => {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <View className="flex-1">
       <KeyboardAvoidingView
         className="flex-1"
         behavior={Platform.OS === "ios" ? "padding" : undefined}
@@ -269,6 +269,6 @@ export const AllergiesForm = (props: { onSuccess?: () => void }) => {
           )}
         </Button>
       </View>
-    </SafeAreaView>
+    </View>
   );
 };
diff --git a/apps/expo/src/components/forms/conditions-form.tsx b/apps/expo/src/components/forms/conditions-form.tsx
@@ -137,7 +137,7 @@ export const ConditionsForm = (props: { onSuccess?: () => void }) => {
   const watchedConditions = form.watch("conditions");
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <View className="flex-1">
       <View className="flex-1 px-6 pb-8 pt-4">
         <FormProvider {...form}>
           <Controller
@@ -202,6 +202,6 @@ export const ConditionsForm = (props: { onSuccess?: () => void }) => {
           )}
         </Button>
       </View>
-    </SafeAreaView>
+    </View>
   );
 };
diff --git a/apps/expo/src/components/forms/coverage-form.tsx b/apps/expo/src/components/forms/coverage-form.tsx
@@ -242,7 +242,7 @@ export const CoverageForm = (props: { onSuccess?: () => void }) => {
                         className="flex-shrink text-base"
                       >
                         {`I consent to receiving medical treatment, the filing of insurance benefits for my care, and the sharing of my medical record information with my insurance company as outlined in the`}{" "}
-                        <Link href={"/onboarding/(modals)/pdf"}>
+                        <Link href={"/onboarding/pdf"}>
                           <Text className="text-blue-500 underline">
                             Consent to Treat Form
                           </Text>

diff --git a/apps/expo/src/components/forms/medications-form.tsx b/apps/expo/src/components/forms/medications-form.tsx
@@ -97,7 +97,7 @@ export const MedicationsForm = (props: { onSuccess?: () => void }) => {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-gray-50">
+    <View className="flex-1">
       <KeyboardAvoidingView
         className="flex-1"
         behavior={Platform.OS === "ios" ? "padding" : undefined}
@@ -157,6 +157,6 @@ export const MedicationsForm = (props: { onSuccess?: () => void }) => {
           )}
         </Button>
       </View>
-    </SafeAreaView>
+    </View>
   );
 };
diff --git a/apps/expo/src/components/forms/welcome-form.tsx b/apps/expo/src/components/forms/welcome-form.tsx
@@ -3,7 +3,6 @@ import {
   Alert,
   SafeAreaView,
   Text,
-  Touchable,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -538,7 +537,7 @@ export const WelcomeForm = (props: { onSuccess?: () => void }) => {
                           className="flex-shrink text-base"
                         >
                           {`I consent to receiving medical treatment, the filing of insurance benefits for my care, and the sharing of my medical record information with my insurance company as outlined in the`}{" "}
-                          <Link href={"/onboarding/(modals)/pdf"}>
+                          <Link href={"/onboarding/pdf"}>
                             <Text className="text-blue-500 underline">
                               Consent to Treat Form
                             </Text>