[Feature] Search by Doctor MSP number for Renewal Application (#392)

* added a doctor typeahead

* added the graphql for the typeahead

* updated thre graphql schemas to correctky handle the request

* generated the graphql types

* sending the request correctly to the graphql server

* sending the request correctly to the graphql server

* changed the search criterion to contains

* added the resolver to the lib graphql

* kept only msp number in the git commit

* changed the search box placeholder text

* return more doctor information

* added the form filling code

* added spacing and explanations

* patched the problem with the reinitialize form

* patching the linting errors

Author: kj3moraes

components/admin/requests/doctor-information/DoctorTypeahead.tsx

@@ -0,0 +1,67 @@
+// DoctorTypeahead.tsx
+import { useState } from 'react';
+import { Text } from '@chakra-ui/react';
+import { useQuery } from '@tools/hooks/graphql'; // your Apollo wrapper hook
+import Typeahead from '@components/Typeahead'; // generic typeahead component
+import { formatFullName } from '@lib/utils/format'; // utility to join names
+import {
+  DoctorResult,
+  SearchDoctorsRequest,
+  SearchDoctorsResponse,
+  SEARCH_DOCTORS,
+} from '@tools/admin/requests/doctor-typeahead';
+
+type Props = {
+  /** Callback when a physician is selected; passes the physician’s data */
+  onSelect: (doctor: DoctorResult) => void;
+};
+
+export default function DoctorTypeahead({ onSelect }: Props) {
+  const [searchString, setSearchString] = useState('');
+
+  // Run the query using the input as the filter
+  const { data, loading, error } = useQuery<SearchDoctorsResponse, SearchDoctorsRequest>(
+    SEARCH_DOCTORS,
+    {
+      variables: {
+        filter: {
+          mspNumber: searchString,
+        },
+      },
+    }
+  );
+
+  if (error) {
+    console.error('Error fetching physicians ', error);
+  }
+
+  /** Called when a physician is selected in the typeahead */
+  const handleSelect = (doctor: DoctorResult | undefined) => {
+    if (doctor) {
+      onSelect(doctor);
+    }
+  };
+
+  return (
+    <Typeahead
+      isLoading={loading}
+      onSearch={setSearchString}
+      renderMenuItemChildren={({ firstName, lastName, phone }: DoctorResult) => {
+        return (
+          <>
+            <Text textStyle="body-regular" mt="8px" mb="4px" ml="4px">
+              {formatFullName(firstName, undefined, lastName)}
+            </Text>
+            <Text textStyle="caption" textColor="text.secondary" mb="8px" ml="4px">
+              Phone {phone}
+            </Text>
+          </>
+        );
+      }}
+      labelKey={(option: DoctorResult) => `${option.firstName} ${option.lastName}`}
+      results={data?.physicians?.result || []}
+      onSelect={handleSelect}
+      placeholder="Search by doctor's MSP number"
+    />
+  );
+}

lib/graphql/resolvers.ts

@@ -89,7 +89,7 @@ import {
   applicationProcessingWalletCardResolver,
 } from '@lib/application-processing/field-resolvers';
 import { guardianPoaFormS3ObjectUrlResolver } from '@lib/guardian/field-resolvers';
-import { comparePhysicians } from '@lib/physicians/resolvers';
+import { physicians, comparePhysicians } from '@lib/physicians/resolvers';
 
 /**
  * Resolver return type - accounts for extra fields
@@ -150,6 +150,7 @@ const resolvers = {
     generateAccountantReport: authorize(generateAccountantReport, [`ACCOUNTING`]),
 
     // Physicians
+    physicians: authorize(physicians, ['SECRETARY']),
     comparePhysicians: authorize(comparePhysicians, ['SECRETARY']),
   },
   Mutation: {

lib/graphql/schema.ts

@@ -28,6 +28,7 @@ export default gql`
     generateAccountantReport(input: GenerateAccountantReportInput!): GenerateAccountantReportResult
 
     # Physicians
+    physicians(filter: PhysiciansFilter): PhysiciansResult
     comparePhysicians(input: ComparePhysiciansInput!): ComparePhysiciansResult
   }
 

lib/graphql/types.ts

@@ -996,6 +996,19 @@ export type PhysicianStatus =
   | 'ACTIVE'
   | 'INACTIVE';
 
+export type PhysiciansFilter = {
+  order: Maybe<Array<Array<Scalars['String']>>>;
+  mspNumber: Maybe<Scalars['String']>;
+  limit: Maybe<Scalars['Int']>;
+  offset: Maybe<Scalars['Int']>;
+};
+
+export type PhysiciansResult = {
+  __typename?: 'PhysiciansResult';
+  result: Array<Physician>;
+  totalCount: Scalars['Int'];
+};
+
 export type Province =
   | 'BC'
   | 'AB'
@@ -1022,6 +1035,7 @@ export type Query = {
   generateApplicationsReport: Maybe<GenerateApplicationsReportResult>;
   generatePermitHoldersReport: Maybe<GeneratePermitHoldersReportResult>;
   generateAccountantReport: Maybe<GenerateAccountantReportResult>;
+  physicians: Maybe<PhysiciansResult>;
   comparePhysicians: Maybe<ComparePhysiciansResult>;
 };
 
@@ -1071,6 +1085,11 @@ export type QueryGenerateAccountantReportArgs = {
 };
 
 
+export type QueryPhysiciansArgs = {
+  filter: Maybe<PhysiciansFilter>;
+};
+
+
 export type QueryComparePhysiciansArgs = {
   input: ComparePhysiciansInput;
 };

lib/physicians/resolvers.ts

@@ -3,9 +3,62 @@ import {
   ComparePhysiciansInput,
   ComparePhysiciansResult,
   QueryComparePhysiciansArgs,
+  PhysiciansFilter,
+  PhysiciansResult,
 } from '@lib/graphql/types';
 import { stripPhoneNumber, stripPostalCode } from '@lib/utils/format';
 import { Physician } from '@prisma/client';
+import { Prisma } from '@prisma/client';
+
+/**
+ * Query and filter physicians from the database.
+ * Supports filtering by first name, last name, and MSP number.
+ * Supports pagination and sorting.
+ * @returns All physicians that match the filter(s).
+ */
+export const physicians: Resolver<{ filter: PhysiciansFilter }, PhysiciansResult> = async (
+  _parent,
+  { filter },
+  { prisma }
+) => {
+  // Create default filter
+  let where: Prisma.PhysicianWhereInput = {};
+
+  if (filter) {
+    const { mspNumber } = filter;
+
+    // Update filter based on input
+    where = {
+      ...(mspNumber && { mspNumber: { contains: mspNumber } }),
+    };
+  }
+
+  // Map the input sorting format into key-value pairs that can be used by Prisma
+  const sortingOrder: Record<string, Prisma.SortOrder> = {};
+
+  if (filter?.order) {
+    filter.order.forEach(([field, order]) => (sortingOrder[field] = order as Prisma.SortOrder));
+  }
+
+  const take = filter?.limit || undefined;
+  const skip = filter?.offset || undefined;
+
+  const totalCount = await prisma.physician.count({
+    where,
+  });
+
+  const physicians = await prisma.physician.findMany({
+    where,
+    skip,
+    take,
+    // orderBy: sortingOrder,
+  });
+
+  return {
+    result: physicians,
+    totalCount,
+  };
+};
 
 /**
  * Compare physician data passed in from UI to existing physician data in DB

lib/physicians/schema.ts

@@ -38,6 +38,19 @@ export default gql`
     postalCode: String!
   }
 
+  # Query many doctors
+  input PhysiciansFilter {
+    order: [[String!]!]
+    mspNumber: String
+    limit: Int
+    offset: Int
+  }
+
+  type PhysiciansResult {
+    result: [Physician!]!
+    totalCount: Int!
+  }
+
   type ComparePhysiciansResult {
     match: Boolean!
     status: PhysicianMatchStatus

pages/admin/request/create-renewal.tsx

@@ -12,6 +12,7 @@ import { getSession } from 'next-auth/client';
 import { GetServerSideProps } from 'next';
 import CancelCreateRequestModal from '@components/admin/requests/create/CancelModal';
 import PermitHolderTypeahead from '@components/admin/permit-holders/Typeahead';
+import DoctorTypeahead from '@components/admin/requests/doctor-information/DoctorTypeahead';
 import { useLazyQuery, useMutation } from '@tools/hooks/graphql';
 import {
   CreateRenewalApplicationRequest,
@@ -281,11 +282,12 @@ export default function CreateRenewal() {
               additionalInformation: INITIAL_ADDITIONAL_QUESTIONS,
               paymentInformation: INITIAL_PAYMENT_DETAILS,
             }}
+            // enableReinitialize={true}
             validationSchema={renewalRequestFormSchema}
             onSubmit={handleSubmit}
             validateOnMount
           >
-            {({ values, isValid }) => (
+            {({ values, isValid, ...formik }) => (
               <Form noValidate>
                 <GridItem paddingTop="32px">
                   <Box
@@ -321,7 +323,28 @@ export default function CreateRenewal() {
                     <Text textStyle="display-small-semibold" paddingBottom="20px">
                       {`Doctor's Information`}
                     </Text>
-                    <DoctorInformationForm />
+                    <Text textStyle="body-regular" color="text.secondary" paddingBottom="16px">
+                      Search for a doctor by MSP number or manually enter the doctor&apos;s
+                      information below
+                    </Text>
+                    <DoctorTypeahead
+                      onSelect={doctor => {
+                        const doctorData = {
+                          firstName: doctor.firstName,
+                          lastName: doctor.lastName,
+                          mspNumber: doctor.mspNumber,
+                          phone: doctor.phone,
+                          addressLine1: doctor.addressLine1,
+                          addressLine2: doctor.addressLine2 || '',
+                          city: doctor.city,
+                          postalCode: doctor.postalCode,
+                        };
+                        formik.setFieldValue('doctorInformation', doctorData);
+                      }}
+                    />
+                    <Box paddingTop="20px">
+                      <DoctorInformationForm />
+                    </Box>
                   </Box>
                 </GridItem>
                 {/* Additional Quesitons Form */}

tools/admin/requests/doctor-typeahead.ts

@@ -0,0 +1,55 @@
+// doctorsTypeahead.ts
+import { gql } from '@apollo/client';
+import { Physician } from '@lib/graphql/types';
+
+/** A simplified Physician type used for the typeahead result */
+export type DoctorResult = Pick<
+  Physician,
+  | 'mspNumber'
+  | 'firstName'
+  | 'lastName'
+  | 'phone'
+  | 'addressLine1'
+  | 'addressLine2'
+  | 'city'
+  | 'province'
+  | 'country'
+  | 'postalCode'
+>;
+
+/** GraphQL query to search for physicians */
+export const SEARCH_DOCTORS = gql`
+  query SearchPhysicians($filter: PhysiciansFilter!) {
+    physicians(filter: $filter) {
+      result {
+        mspNumber
+        firstName
+        lastName
+        phone
+        addressLine1
+        addressLine2
+        city
+        province
+        country
+        postalCode
+        status
+      }
+    }
+  }
+`;
+
+/** Query request variables */
+export type SearchDoctorsRequest = {
+  filter: {
+    mspNumber?: string;
+    limit?: number;
+    offset?: number;
+  };
+};
+
+/** Query response type */
+export type SearchDoctorsResponse = {
+  physicians: {
+    result: Array<DoctorResult>;
+  };
+};