OTP flow: switching to schedulable users and user base

src/Routers/SessionRouter.tsx

@@ -20,52 +20,36 @@ export const routes = {
   "/": () => <LandingPage />,
   "/facilities": () => <FacilitiesPage />,
   "/facility/:id": ({ id }: { id: string }) => <FacilityDetailsPage id={id} />,
-  "/facility/:facilityId/appointments/:staffUsername/otp/:page": ({
+  "/facility/:facilityId/appointments/:staffId/otp/:page": ({
     facilityId,
-    staffUsername,
+    staffId,
     page,
   }: {
     facilityId: string;
-    staffUsername: string;
+    staffId: string;
     page: string;
-  }) => (
-    <PatientLogin
-      facilityId={facilityId}
-      staffUsername={staffUsername}
-      page={page}
-    />
-  ),
-  "/facility/:facilityId/appointments/:staffExternalId/book-appointment": ({
+  }) => <PatientLogin facilityId={facilityId} staffId={staffId} page={page} />,
+  "/facility/:facilityId/appointments/:staffId/book-appointment": ({
     facilityId,
-    staffExternalId,
+    staffId,
   }: {
     facilityId: string;
-    staffExternalId: string;
-  }) => (
-    <ScheduleAppointment
-      facilityId={facilityId}
-      staffExternalId={staffExternalId}
-    />
-  ),
-  "/facility/:facilityId/appointments/:staffUsername/patient-select": ({
+    staffId: string;
+  }) => <ScheduleAppointment facilityId={facilityId} staffId={staffId} />,
+  "/facility/:facilityId/appointments/:staffId/patient-select": ({
     facilityId,
-    staffUsername,
+    staffId,
   }: {
     facilityId: string;
-    staffUsername: string;
-  }) => <PatientSelect facilityId={facilityId} staffUsername={staffUsername} />,
-  "/facility/:facilityId/appointments/:staffUsername/patient-registration": ({
+    staffId: string;
+  }) => <PatientSelect facilityId={facilityId} staffId={staffId} />,
+  "/facility/:facilityId/appointments/:staffId/patient-registration": ({
     facilityId,
-    staffUsername,
+    staffId,
   }: {
     facilityId: string;
-    staffUsername: string;
-  }) => (
-    <PatientRegistration
-      facilityId={facilityId}
-      staffUsername={staffUsername}
-    />
-  ),
+    staffId: string;
+  }) => <PatientRegistration facilityId={facilityId} staffId={staffId} />,
   "/login": () => <Login />,
   "/forgot-password": () => <Login forgot={true} />,
   "/password_reset/:token": ({ token }: { token: string }) => (

src/Utils/request/api.tsx

@@ -366,7 +366,7 @@ const routes = {
 
   getScheduleAbleFacilityUser: {
     path: "/api/v1/facility/{facility_id}/schedulable_users/{user_id}/",
-    TRes: Type<UserAssignedModel>(),
+    TRes: Type<UserBase>(),
   },
 
   getScheduleAbleFacilityUsers: {

src/pages/Appoinments/PatientRegistration.tsx

@@ -62,11 +62,11 @@ const initialForm: AppointmentPatientRegister & {
 
 type PatientRegistrationProps = {
   facilityId: string;
-  staffUsername: string;
+  staffId: string;
 };
 
 export function PatientRegistration(props: PatientRegistrationProps) {
-  const { staffUsername } = props;
+  const { staffId } = props;
   const selectedSlot = JSON.parse(
     localStorage.getItem("selectedSlot") ?? "",
   ) as SlotAvailability;
@@ -230,7 +230,7 @@ export function PatientRegistration(props: PatientRegistrationProps) {
           type="button"
           onClick={() =>
             navigate(
-              `/facility/${props.facilityId}/appointments/${staffUsername}/patient-select`,
+              `/facility/${props.facilityId}/appointments/${staffId}/patient-select`,
             )
           }
         >
@@ -436,7 +436,7 @@ export function PatientRegistration(props: PatientRegistrationProps) {
                 type="button"
                 onClick={() =>
                   navigate(
-                    `/facility/${props.facilityId}/appointments/${staffUsername}/patient-select`,
+                    `/facility/${props.facilityId}/appointments/${staffId}/patient-select`,
                   )
                 }
               >

src/pages/Appoinments/PatientSelect.tsx

@@ -27,10 +27,10 @@ import { TokenData } from "@/types/auth/otpToken";
 
 export default function PatientSelect({
   facilityId,
-  staffUsername,
+  staffId,
 }: {
   facilityId: string;
-  staffUsername: string;
+  staffId: string;
 }) {
   const { t } = useTranslation();
   const selectedSlot = JSON.parse(
@@ -44,16 +44,16 @@ export default function PatientSelect({
 
   const queryClient = useQueryClient();
 
-  if (!staffUsername) {
-    Notification.Error({ msg: "Staff Username Not Found" });
+  if (!staffId) {
+    Notification.Error({ msg: "Staff Not Found" });
     navigate(`/facility/${facilityId}/`);
   } else if (!tokenData) {
     Notification.Error({ msg: "Phone Number Not Found" });
-    navigate(`/facility/${facilityId}/appointments/${staffUsername}/otp/send`);
+    navigate(`/facility/${facilityId}/appointments/${staffId}/otp/send`);
   } else if (!selectedSlot) {
     Notification.Error({ msg: "Selected Slot Not Found" });
     navigate(
-      `/facility/${facilityId}/appointments/${staffUsername}/book-appointment`,
+      `/facility/${facilityId}/appointments/${staffId}/book-appointment`,
     );
   }
 
@@ -205,7 +205,7 @@ export default function PatientSelect({
           className="border border-secondary-400"
           onClick={() =>
             navigate(
-              `/facility/${facilityId}/appointments/${staffUsername}/book-appointment`,
+              `/facility/${facilityId}/appointments/${staffId}/book-appointment`,
             )
           }
         >
@@ -229,7 +229,7 @@ export default function PatientSelect({
           className="w-1/2 self-center"
           onClick={() =>
             navigate(
-              `/facility/${facilityId}/appointments/${staffUsername}/patient-registration`,
+              `/facility/${facilityId}/appointments/${staffId}/patient-registration`,
             )
           }
         >

src/pages/Appoinments/Schedule.tsx

@@ -32,12 +32,12 @@ import { TokenData } from "@/types/auth/otpToken";
 
 interface AppointmentsProps {
   facilityId: string;
-  staffExternalId: string;
+  staffId: string;
 }
 
 export function ScheduleAppointment(props: AppointmentsProps) {
   const { t } = useTranslation();
-  const { facilityId, staffExternalId } = props;
+  const { facilityId, staffId } = props;
   const [selectedMonth, setSelectedMonth] = useState(new Date());
   const [selectedDate, setSelectedDate] = useState(new Date());
   const [selectedSlot, setSelectedSlot] = useState<SlotAvailability>();
@@ -47,14 +47,12 @@ export function ScheduleAppointment(props: AppointmentsProps) {
     localStorage.getItem(CarePatientTokenKey) || "{}",
   );
 
-  if (!staffExternalId) {
+  if (!staffId) {
     Notification.Error({ msg: "Staff username not found" });
     navigate(`/facility/${facilityId}/`);
   } else if (!tokenData) {
     Notification.Error({ msg: "Phone number not found" });
-    navigate(
-      `/facility/${facilityId}/appointments/${staffExternalId}/otp/send`,
-    );
+    navigate(`/facility/${facilityId}/appointments/${staffId}/otp/send`);
   }
 
   const { data: facilityResponse, error: facilityError } = useQuery<
@@ -73,24 +71,23 @@ export function ScheduleAppointment(props: AppointmentsProps) {
   }
 
   const { data: userData, error: userError } = useQuery({
-    queryKey: ["user", staffExternalId],
-    queryFn: () =>
-      request(routes.getScheduleAbleFacilityUser, {
-        pathParams: { facilityId: facilityId, user_id: staffExternalId },
-      }),
-    enabled: !!staffExternalId,
+    queryKey: ["user", facilityId, staffId],
+    queryFn: query(routes.getScheduleAbleFacilityUser, {
+      pathParams: { facility_id: facilityId, user_id: staffId },
+    }),
+    enabled: !!facilityId && !!staffId,
   });
 
   if (userError) {
     Notification.Error({ msg: "Error while fetching user data" });
   }
 
   const slotsQuery = useQuery<{ results: SlotAvailability[] }>({
-    queryKey: ["slots", facilityId, staffExternalId, selectedDate],
+    queryKey: ["slots", facilityId, staffId, selectedDate],
     queryFn: query(routes.otp.getSlotsForDay, {
       body: {
         facility: facilityId,
-        resource: staffExternalId,
+        resource: staffId,
         day: dateQueryString(selectedDate),
       },
       headers: {
@@ -135,12 +132,10 @@ export function ScheduleAppointment(props: AppointmentsProps) {
     );
   };
 
-  if (!userData?.data) {
+  if (!userData) {
     return <Loading />;
   }
 
-  const user = userData.data;
-
   return (
     <div className="flex flex-col">
       <div className="container mx-auto px-4 py-8">
@@ -162,24 +157,24 @@ export function ScheduleAppointment(props: AppointmentsProps) {
               <div className="flex flex-col">
                 <div className="flex flex-col gap-4 py-4 justify-between h-full">
                   <Avatar
-                    imageUrl={user.read_profile_picture_url}
-                    name={`${user.first_name} ${user.last_name}`}
+                    imageUrl={userData.profile_picture_url}
+                    name={`${userData.first_name} ${userData.last_name}`}
                     className="h-96 w-96 self-center rounded-sm"
                   />
 
                   <div className="flex grow flex-col px-4">
                     <h3 className="truncate text-xl font-semibold">
-                      {user.user_type === "Doctor"
-                        ? `Dr. ${user.first_name} ${user.last_name}`
-                        : `${user.first_name} ${user.last_name}`}
+                      {userData.user_type === "doctor"
+                        ? `Dr. ${userData.first_name} ${userData.last_name}`
+                        : `${userData.first_name} ${userData.last_name}`}
                     </h3>
                     <p className="text-sm text-muted-foreground truncate">
-                      {user.user_type}
+                      {userData.user_type}
                     </p>
 
                     {/* <p className="text-xs mt-4">Education: </p>
                     <p className="text-sm text-muted-foreground truncate">
-                      {user.qualification}
+                      {userData.qualification}
                     </p> */}
                   </div>
                 </div>
@@ -198,9 +193,9 @@ export function ScheduleAppointment(props: AppointmentsProps) {
             <div className="flex flex-col gap-6">
               <span className="text-base font-semibold">
                 {t("book_an_appointment_with")}{" "}
-                {user.user_type === "Doctor"
-                  ? `Dr. ${user.first_name} ${user.last_name}`
-                  : `${user.first_name} ${user.last_name}`}
+                {userData.user_type === "doctor"
+                  ? `Dr. ${userData.first_name} ${userData.last_name}`
+                  : `${userData.first_name} ${userData.last_name}`}
               </span>
               <div>
                 <Label className="mb-2">{t("reason_for_visit")}</Label>
@@ -299,7 +294,7 @@ export function ScheduleAppointment(props: AppointmentsProps) {
                 );
                 localStorage.setItem("reason", reason);
                 navigate(
-                  `/facility/${facilityId}/appointments/${staffExternalId}/patient-select`,
+                  `/facility/${facilityId}/appointments/${staffId}/patient-select`,
                 );
               }}
             >

src/pages/Appoinments/auth/PatientLogin.tsx

@@ -47,11 +47,11 @@ const FormSchema = z.object({
 
 export default function PatientLogin({
   facilityId,
-  staffUsername,
+  staffId,
   page,
 }: {
   facilityId: string;
-  staffUsername: string;
+  staffId: string;
   page: string;
 }) {
   const { goBack } = useAppHistory();
@@ -74,7 +74,7 @@ export default function PatientLogin({
     dayjs(tokenData.createdAt).isAfter(dayjs().subtract(14, "minutes"))
   ) {
     navigate(
-      `/facility/${facilityId}/appointments/${staffUsername}/book-appointment`,
+      `/facility/${facilityId}/appointments/${staffId}/book-appointment`,
     );
   }
   const validate = (phoneNumber: string) => {
@@ -110,11 +110,11 @@ export default function PatientLogin({
         ) {
           Notification.Success({ msg: t("valid_otp_found") });
           navigate(
-            `/facility/${facilityId}/appointments/${staffUsername}/book-appointment`,
+            `/facility/${facilityId}/appointments/${staffId}/book-appointment`,
           );
         } else {
           navigate(
-            `/facility/${facilityId}/appointments/${staffUsername}/otp/verify`,
+            `/facility/${facilityId}/appointments/${staffId}/otp/verify`,
           );
         }
       }
@@ -162,7 +162,7 @@ export default function PatientLogin({
         };
         localStorage.setItem(CarePatientTokenKey, JSON.stringify(tokenData));
         navigate(
-          `/facility/${facilityId}/appointments/${staffUsername}/book-appointment`,
+          `/facility/${facilityId}/appointments/${staffId}/book-appointment`,
         );
       }
     },
@@ -289,7 +289,7 @@ export default function PatientLogin({
           page === "send"
             ? goBack()
             : navigate(
-                `/facility/${facilityId}/appointments/${staffUsername}/otp/send`,
+                `/facility/${facilityId}/appointments/${staffId}/otp/send`,
               )
         }
       >

src/pages/Facility/components/UserCard.tsx

@@ -36,10 +36,10 @@ export function UserCard({ user, className, facilityId }: Props) {
       Object.keys(tokenData).length > 0 &&
       dayjs(tokenData.createdAt).isAfter(dayjs().subtract(14, "minutes"))
     ) {
-      return `/facility/${facilityId}/appointments/${user.external_id}/book-appointment`;
+      return `/facility/${facilityId}/appointments/${user.id}/book-appointment`;
     }
-    return `/facility/${facilityId}/appointments/${user.external_id}/otp/send`;
-  }, [tokenData, facilityId, user.external_id]);
+    return `/facility/${facilityId}/appointments/${user.id}/otp/send`;
+  }, [tokenData, facilityId, user.id]);
 
   return (
     <Card className={cn("overflow-hidden bg-white", className)}>