onboarding done.

trevorpfiz · Dec 28, 2023 · 1b227a8 · 1b227a8
1 parent 79abbb2
commit 1b227a8
Show file tree

Hide file tree

Showing 18 changed files with 91 additions and 52 deletions.
diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
@@ -99,9 +99,9 @@ const Index = () => {
             <Text className="text-xl">Overview</Text>
           </View>
         </Link>
-        <Link href="/onboarding/schedule">
+        <Link href="/onboarding/confirmation">
           <View className="p-4">
-            <Text className="text-xl">Scheduling</Text>
+            <Text className="text-xl">Confirmation</Text>
           </View>
         </Link>
         <Link href="/portal/(tabs)">

diff --git a/apps/expo/src/app/onboarding/_layout.tsx b/apps/expo/src/app/onboarding/_layout.tsx
@@ -77,7 +77,7 @@ export default function OnboardingLayout() {
           headerStyle: {
             backgroundColor: "#fff",
           },
-          headerShown: true,
+          headerShown: false,
         }}
       />
     </Stack>

diff --git a/apps/expo/src/app/onboarding/confirmation.tsx b/apps/expo/src/app/onboarding/confirmation.tsx
@@ -1,8 +1,9 @@
 import React from "react";
-import { Button, SafeAreaView, Text, View } from "react-native";
+import { SafeAreaView, Text, View } from "react-native";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 
+import { Button } from "~/components/ui/rn-ui/components/ui/button";
 import { atomWithMMKV } from "~/utils/atom-with-mmkv";
 import { formatAppointmentDateTime } from "~/utils/dates";
 
@@ -17,20 +18,21 @@ export default function ConfirmationPage() {
   return (
     <>
       <SafeAreaView className="flex-[0] bg-white" />
-      <SafeAreaView className="flex-1 bg-transparent">
-        <View className="flex-1 bg-gray-100">
+      <SafeAreaView className="flex-1 bg-gray-100">
+        <View className="flex-1 flex-col justify-between bg-gray-100">
           <View className="bg-white p-8 px-10">
-            <Text className="text-4xl font-semibold">{`You're all set!`}</Text>
+            <Text className="pb-4 pt-8 text-4xl font-semibold">{`You're all set!`}</Text>
             <Text className="text-lg font-normal">{`Appointment for ${appointmentDate} is scheduled!`}</Text>
           </View>
-          <View className="flex-1">
-            <Text>Next Steps</Text>
-            <Text>{`1. Your appointment will show up on the home page and the appointments tab of your patient portal`}</Text>
+
+          <View className="px-12 pb-4">
+            <Button
+              onPress={() => router.replace("/portal/(tabs)/")}
+              textClass="text-center"
+            >
+              Head to Patient Portal
+            </Button>
           </View>
-          <Button
-            title="Head to Patient Portal"
-            onPress={() => router.replace("/portal/(tabs)/")}
-          />
         </View>
       </SafeAreaView>
     </>

diff --git a/apps/expo/src/app/portal/(tabs)/account/billing.tsx b/apps/expo/src/app/portal/(tabs)/account/billing.tsx
@@ -49,7 +49,7 @@ export default function Billing() {
                 <Text className="text-lg font-medium">Medical Bill</Text>
                 <Text>
                   {bill.resource?.date
-                    ? formatDateTime(new Date(bill.resource.date))
+                    ? formatDateTime(bill.resource.date)
                     : "Unknown date"}
                 </Text>
               </View>

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/clinical-notes.tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/clinical-notes.tsx
@@ -56,7 +56,7 @@ export default function ClinicalNotes() {
                 </Text>
                 <Text>
                   {note.resource?.date
-                    ? formatDateTime(new Date(note.resource.date))
+                    ? formatDateTime(note.resource.date)
                     : "Unknown date"}
                 </Text>
               </View>

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/test-results/[testId].tsx b/apps/expo/src/app/portal/(tabs)/health-record/test-results/[testId].tsx
@@ -5,10 +5,6 @@ import { useAtom } from "jotai";
 import { ChevronRight, Loader2 } from "lucide-react-native";
 
 import { patientIdAtom } from "~/components/forms/welcome-form";
-import {
-  ChatRightHeaderClose,
-  MessagesLeftHeaderBack,
-} from "~/components/ui/headers/messages-header";
 import ObservationItem from "~/components/ui/health-record/observation-item";
 import { api } from "~/utils/api";
 import { formatDateTime } from "~/utils/dates";
@@ -107,9 +103,7 @@ export default function TestPage() {
               </Text>
               <Text>
                 Collected on{" "}
-                {formatDateTime(
-                  new Date(diagnosticReportItem.effectiveDateTime),
-                )}
+                {formatDateTime(diagnosticReportItem.effectiveDateTime)}
               </Text>
             </View>
 

diff --git a/apps/expo/src/app/portal/(tabs)/index.tsx b/apps/expo/src/app/portal/(tabs)/index.tsx
@@ -5,7 +5,6 @@ import { patientIdAtom } from "~/components/forms/welcome-form";
 import NextAppointment from "~/components/next-appointment";
 import Tasks from "~/components/tasks";
 import { api } from "~/utils/api";
-import { formatDateTime } from "~/utils/dates";
 
 export default function Home() {
   const [patientId] = useAtom(patientIdAtom);

diff --git a/apps/expo/src/components/completed-appointments.tsx b/apps/expo/src/components/completed-appointments.tsx
@@ -119,13 +119,13 @@ export default function CompletedAppointments() {
                     <View className="flex-row items-center gap-2">
                       <Calendar size={24} />
                       <Text className="text-muted-foreground">
-                        {formatDayDate(new Date(item.resource.start))}
+                        {formatDayDate(item.resource.start)}
                       </Text>
                     </View>
                     <View className="flex-row items-center gap-2">
                       <Clock size={24} />
                       <Text className="text-muted-foreground">
-                        {formatTime(new Date(item.resource.start))}
+                        {formatTime(item.resource.start)}
                       </Text>
                     </View>
                   </CardContent>

diff --git a/apps/expo/src/components/next-appointment.tsx b/apps/expo/src/components/next-appointment.tsx
@@ -117,13 +117,13 @@ export default function NextAppointment() {
             <View className="flex-row items-center gap-2">
               <Calendar size={24} />
               <Text className="text-muted-foreground">
-                {formatDayDate(new Date(soonestAppointment.resource.start))}
+                {formatDayDate(soonestAppointment.resource.start)}
               </Text>
             </View>
             <View className="flex-row items-center gap-2">
               <Clock size={24} />
               <Text className="text-muted-foreground">
-                {formatTime(new Date(soonestAppointment.resource.start))}
+                {formatTime(soonestAppointment.resource.start)}
               </Text>
             </View>
           </CardContent>

diff --git a/apps/expo/src/components/schedule-appointment.tsx b/apps/expo/src/components/schedule-appointment.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Alert, Button, SafeAreaView, Text, View } from "react-native";
+import { Alert, SafeAreaView, Text, View } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react-native";
@@ -12,11 +12,13 @@ import {
   ScheduleHeader,
   selectedDateAtom,
 } from "~/components/ui/headers/schedule-header";
+import { Button } from "~/components/ui/rn-ui/components/ui/button";
 import {
   selectedSlotAtom,
   SlotItem,
 } from "~/components/ui/scheduling/slot-item";
 import { api } from "~/utils/api";
+import { formatDayDate } from "~/utils/dates";
 
 // TimeSlots component to render the slots
 const TimeSlots = ({ slots }: { slots: SlotResource[] }) => {
@@ -45,7 +47,12 @@ const TimeSlots = ({ slots }: { slots: SlotResource[] }) => {
           paddingVertical: 16,
         }}
         ListHeaderComponent={
-          <Text className="p-2 text-xl font-semibold">{`Select a time for ${selectedDate}`}</Text>
+          <View className="flex-row items-center pb-4 pt-2">
+            <Text className="text-xl">Select a time for </Text>
+            <Text className="text-xl font-bold">{`${formatDayDate(
+              selectedDate,
+            )}`}</Text>
+          </View>
         }
       />
     </View>
@@ -241,9 +248,6 @@ export default function ScheduleAppointment(props: {
         body: updateRequestBody,
       });
     } else {
-      console.log(
-        "askldjfklafjsdfadkslklfjdsajklfadsjklfdsjlkdsfljkdfsaljkfdsakljlsadfjk",
-      );
       // Creating a new appointment
       mutation.mutate({
         body: requestBody,
@@ -278,11 +282,30 @@ export default function ScheduleAppointment(props: {
           {/* Display slots based on selectedDate */}
           <TimeSlots slots={slots ?? []} />
         </View>
-        <Button
-          title="Book"
-          disabled={!selectedSlot}
-          onPress={() => onBook(selectedSlot)}
-        />
+        <View className="px-12 pb-4">
+          <Button
+            key={selectedSlot ? "enabled" : "disabled"}
+            onPress={() => onBook(selectedSlot)}
+            disabled={!selectedSlot}
+            textClass="text-center"
+          >
+            {mutation.isLoading ? (
+              <View className="flex-row items-center justify-center gap-3">
+                <Loader2
+                  size={24}
+                  color="white"
+                  strokeWidth={3}
+                  className="animate-spin"
+                />
+                <Text className="text-xl font-medium text-primary-foreground">
+                  Booking...
+                </Text>
+              </View>
+            ) : (
+              "Book"
+            )}
+          </Button>
+        </View>
       </View>
     </SafeAreaView>
   );

diff --git a/apps/expo/src/components/tasks.tsx b/apps/expo/src/components/tasks.tsx
@@ -102,7 +102,7 @@ export default function Tasks() {
                   : "border-green-400 bg-green-200"
             }`}
           >
-            <Text>{formatDateTime(new Date(item.resource.authoredOn!))}</Text>
+            <Text>{formatDateTime(item.resource.authoredOn!)}</Text>
             <Text>{item.resource.description}</Text>
             <Text>{item.resource.status}</Text>
           </View>

diff --git a/apps/expo/src/components/ui/headers/schedule-header.tsx b/apps/expo/src/components/ui/headers/schedule-header.tsx
@@ -7,6 +7,7 @@ import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react-native";
 
 import type { SlotResource } from "@acme/shared/src/validators/slot";
 
+import { selectedSlotAtom } from "~/components/ui/scheduling/slot-item";
 import { api } from "~/utils/api";
 import { getMonthYearFromDate } from "~/utils/dates";
 import { cn } from "../rn-ui/lib/utils";
@@ -23,6 +24,7 @@ const findUniqueDates = (slots: SlotResource[]) => {
 
 export function ScheduleHeader() {
   const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
+  const [, setSelectedSlot] = useAtom(selectedSlotAtom);
   const [monthYear, setMonthYear] = useState("");
   const scrollViewRef = useRef<ScrollView | null>(null);
   const itemsRef = useRef<(View | null)[]>([]);
@@ -67,6 +69,7 @@ export function ScheduleHeader() {
   const selectDate = (dateString: string, index: number) => {
     const selected = itemsRef.current[index];
     setSelectedDate(dateString);
+    setSelectedSlot(null);
 
     selected?.measure((x) => {
       const scrollView = scrollViewRef.current;

diff --git a/apps/expo/src/components/ui/health-record/observation-item.tsx b/apps/expo/src/components/ui/health-record/observation-item.tsx
@@ -35,7 +35,7 @@ export default function ObservationItem({
       <View className="flex-1 flex-row items-center justify-between">
         <View>
           <Text className="text-lg font-semibold">{name}</Text>
-          <Text>Collected on {formatDateTime(new Date(collectedDate))}</Text>
+          <Text>Collected on {formatDateTime(collectedDate)}</Text>
         </View>
         <View>
           {valueQuantity && !components && (

diff --git a/apps/expo/src/components/ui/health-record/test-item.tsx b/apps/expo/src/components/ui/health-record/test-item.tsx
@@ -43,8 +43,8 @@ export default function TestItem({
           <Icon size={24} color="black" />
           <View>
             <Text className="text-lg font-semibold">{name}</Text>
-            <Text>Authored: {formatDateTime(new Date(authored))}</Text>
-            <Text>Issued: {formatDateTime(new Date(issued))}</Text>
+            <Text>Authored: {formatDateTime(authored)}</Text>
+            <Text>Issued: {formatDateTime(issued)}</Text>
           </View>
         </View>
 

diff --git a/apps/expo/src/components/ui/rn-ui/components/ui/button.tsx b/apps/expo/src/components/ui/rn-ui/components/ui/button.tsx
@@ -7,7 +7,7 @@ import { useColorScheme } from "nativewind";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "flex-row items-center justify-center rounded-md text-sm font-medium ring-offset-background disabled:opacity-50",
+  "flex-row items-center justify-center rounded-md text-sm font-medium ring-offset-background",
   {
     variants: {
       variant: {
@@ -74,18 +74,32 @@ const Button = React.forwardRef<
     }
 >(
   (
-    { className, textClass, variant = "default", size, children, ...props },
+    {
+      className,
+      textClass,
+      variant = "default",
+      size,
+      disabled,
+      children,
+      ...props
+    },
     ref,
   ) => {
     const { colorScheme } = useColorScheme();
+
+    // Define a style for the disabled state
+    const disabledStyle = { opacity: disabled ? 0.5 : 1 };
+
     return (
       <Pressable
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        style={disabledStyle}
         android_ripple={{
           color: rippleColor(colorScheme === "dark")[variant as "default"],
           borderless: false,
         }}
+        disabled={disabled}
         {...props}
       >
         {typeof children === "string"

diff --git a/apps/expo/src/components/ui/scheduling/slot-item.tsx b/apps/expo/src/components/ui/scheduling/slot-item.tsx
@@ -43,7 +43,7 @@ const SlotItem = ({
           isSelected ? "text-white" : "text-blue-500",
         )}
       >
-        {formatTime(new Date(slot.start))}
+        {formatTime(slot.start)}
       </Text>
     </TouchableOpacity>
   );

diff --git a/apps/expo/src/components/upcoming-appointments.tsx b/apps/expo/src/components/upcoming-appointments.tsx
@@ -187,13 +187,13 @@ export default function UpcomingAppointments() {
                     <View className="flex-row items-center gap-2">
                       <Calendar size={24} />
                       <Text className="text-muted-foreground">
-                        {formatDayDate(new Date(item.resource.start))}
+                        {formatDayDate(item.resource.start)}
                       </Text>
                     </View>
                     <View className="flex-row items-center gap-2">
                       <Clock size={24} />
                       <Text className="text-muted-foreground">
-                        {formatTime(new Date(item.resource.start))}
+                        {formatTime(item.resource.start)}
                       </Text>
                     </View>
                   </CardContent>

diff --git a/apps/expo/src/utils/dates.ts b/apps/expo/src/utils/dates.ts
@@ -1,18 +1,22 @@
 import { format, parseISO, startOfMonth } from "date-fns";
 
-export function formatDate(date: Date) {
+export function formatDate(dateString: string) {
+  const date = parseISO(dateString);
   return format(date, "LLL dd, y"); // Dec 06, 2023
 }
 
-export function formatTime(date: Date) {
+export function formatTime(dateString: string) {
+  const date = parseISO(dateString);
   return format(date, "h:mm a"); // Outputs time like "11:30 AM"
 }
 
-export function formatDateTime(date: Date) {
+export function formatDateTime(dateString: string) {
+  const date = parseISO(dateString);
   return format(date, "MMM dd, yyyy, h:mm a"); // Outputs date and time like "Sep 21, 2023, 11:30 AM"
 }
 
-export function formatDayDate(date: Date) {
+export function formatDayDate(dateString: string) {
+  const date = parseISO(dateString);
   return format(date, "EEEE, MMMM dd"); // Outputs date like "Thursday, December 18"
 }
 
@@ -35,7 +39,7 @@ export function getFormattedDate(dateString: string) {
 
 export function formatAppointmentDateTime(dateString: string) {
   const date = parseISO(dateString);
-  const formattedDate = format(date, "MMM do"); // "Dec 28th"
+  const formattedDate = format(date, "MMMM do"); // "December 28th"
   const formattedTime = format(date, "h:mm a"); // "10:15 AM"
   return `${formattedDate} at ${formattedTime}`;
 }