6177 create patient from prescription window

client/packages/invoices/src/Prescriptions/ListView/AppBarButtons.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { AppRoute } from '@openmsupply-client/config';
 import {
   DownloadIcon,
@@ -16,8 +16,13 @@ import {
   Platform,
   useNavigate,
   RouteBuilder,
+  useCallbackWithPermission,
+  UserPermission,
 } from '@openmsupply-client/common';
-import { PatientSearchModal } from '@openmsupply-client/system';
+import {
+  CreatePatientModal,
+  PatientSearchModal,
+} from '@openmsupply-client/system';
 import { ListParams, usePrescriptionList, usePrescription } from '../api';
 import { prescriptionToCsv } from '../../utils';
 
@@ -28,13 +33,21 @@ export const AppBarButtonsComponent: FC<{
   const t = useTranslation();
   const navigate = useNavigate();
   const { success, error } = useNotification();
+  const [patientModalOpen, setPatientModalOpen] = useState(false);
+
   const {
     create: { create },
   } = usePrescription();
+
   const {
     query: { data, isLoading },
   } = usePrescriptionList(listParams);
 
+  const onCreatePatient = useCallbackWithPermission(
+    UserPermission.PatientMutate,
+    () => setPatientModalOpen(true)
+  );
+
   const csvExport = async () => {
     if (!data || !data?.nodes.length) {
       error(t('error.no-data'))();
@@ -78,6 +91,7 @@ export const AppBarButtonsComponent: FC<{
               errorSnack();
             }
           }}
+          openPatientModal={onCreatePatient}
         />
         <LoadingButton
           startIcon={<DownloadIcon />}
@@ -87,6 +101,9 @@ export const AppBarButtonsComponent: FC<{
           disabled={EnvUtils.platform === Platform.Android}
           label={t('button.export')}
         />
+        {patientModalOpen && (
+          <CreatePatientModal onClose={() => setPatientModalOpen(false)} />
+        )}
       </Grid>
     </AppBarButtonsPortal>
   );

client/packages/system/src/Patient/Components/PatientSearchModal/PatientSearchModal.tsx

@@ -3,8 +3,10 @@ import {
   AutocompleteList,
   BasicModal,
   Box,
+  ButtonWithIcon,
   createQueryParamsStore,
   ModalTitle,
+  PlusCircleIcon,
   QueryParamsProvider,
   Typography,
   useTranslation,
@@ -23,6 +25,7 @@ const PatientSearchComponent: FC<PatientSearchModalProps> = ({
   open,
   onClose,
   onChange,
+  openPatientModal,
 }) => {
   const t = useTranslation();
   const PatientOptionRenderer = getPatientOptionRenderer();
@@ -36,6 +39,11 @@ const PatientSearchComponent: FC<PatientSearchModalProps> = ({
     onClose();
   };
 
+  function handlePatientModalClick() {
+    handleClose();
+    openPatientModal();
+  }
+
   return (
     <BasicModal open={open} onClose={handleClose} height={modalHeight}>
       <ModalTitle title={t('label.patients')} />
@@ -65,6 +73,13 @@ const PatientSearchComponent: FC<PatientSearchModalProps> = ({
           noOptionsText=""
         />
       </Box>
+      <Box p={2}>
+        <ButtonWithIcon
+          Icon={<PlusCircleIcon />}
+          label={'Create new patient'}
+          onClick={handlePatientModalClick}
+        />
+      </Box>
     </BasicModal>
   );
 };

client/packages/system/src/Patient/CreatePatientModal/CreatePatientModal.tsx

@@ -13,7 +13,10 @@ import {
   useTranslation,
   useDebounceCallback,
   DocumentRegistryCategoryNode,
+  useLocation,
+  RouteBuilder,
 } from '@openmsupply-client/common';
+import { AppRoute } from '@openmsupply-client/config';
 import { PatientFormTab } from './PatientFormTab';
 import { PatientResultsTab } from './PatientResultsTab';
 import {
@@ -36,9 +39,7 @@ export const CreatePatientModal: FC<CreatePatientModal> = ({ onClose }) => {
     useDocumentRegistry.get.documentRegistries({
       filter: { category: { equalTo: DocumentRegistryCategoryNode.Patient } },
     });
-
   const [hasError, setHasError] = useState(false);
-
   const [, setDocumentRegistry] = useState<
     DocumentRegistryFragment | undefined
   >();
@@ -47,6 +48,7 @@ export const CreatePatientModal: FC<CreatePatientModal> = ({ onClose }) => {
     onClose,
   });
   const navigate = useNavigate();
+  const location = useLocation();
   const { createNewPatient, setCreateNewPatient } = usePatientStore();
   const t = useTranslation();
 
@@ -56,7 +58,19 @@ export const CreatePatientModal: FC<CreatePatientModal> = ({ onClose }) => {
 
   const onOk = () => {
     if (createNewPatient) {
-      navigate(createNewPatient.id);
+      const urlSegments = location.pathname.split('/');
+
+      if (urlSegments.includes(AppRoute.Patients))
+        navigate(createNewPatient.id);
+
+      if (urlSegments.includes(AppRoute.Prescription))
+        navigate(
+          RouteBuilder.create(AppRoute.Dispensary)
+            .addPart(AppRoute.Patients)
+            .addPart(createNewPatient.id)
+            .addQuery({ previousPath: AppRoute.Prescription })
+            .build()
+        );
     }
   };
 

client/packages/system/src/Patient/PatientView/PatientView.tsx

@@ -14,7 +14,11 @@ import {
   BasicSpinner,
   DocumentRegistryCategoryNode,
   useNavigate,
+  useSearchParams,
+  RouteBuilder,
+  FnUtils,
 } from '@openmsupply-client/common';
+import { AppRoute } from '@openmsupply-client/config';
 import { usePatient } from '../api';
 import { AppBarButtons } from './AppBarButtons';
 import { PatientSummary } from './PatientSummary';
@@ -40,6 +44,7 @@ import { ContactTraceListView, CreateContactTraceModal } from '../ContactTrace';
 import defaultPatientSchema from './DefaultPatientSchema.json';
 import defaultPatientUISchema from './DefaultPatientUISchema.json';
 import { VaccinationCardsListView } from '../VaccinationCard/ListView';
+import { usePrescription } from '@openmsupply-client/invoices/src/Prescriptions';
 
 const DEFAULT_SCHEMA: SchemaData = {
   formSchemaId: undefined,
@@ -98,6 +103,12 @@ const PatientDetailView = ({
     createNewPatient,
     setCreateNewPatient,
   } = usePatientStore();
+
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const fromPrescription =
+    searchParams.get('previousPath') === AppRoute.Prescription;
+
   const patientId = usePatient.utils.id();
   const { data: currentPatient, isLoading: isCurrentPatientLoading } =
     usePatient.document.get(patientId);
@@ -107,8 +118,11 @@ const PatientDetailView = ({
         category: { equalTo: DocumentRegistryCategoryNode.Patient },
       },
     });
+  const {
+    create: { create: createPrescription },
+  } = usePrescription();
+
   const isLoading = isCurrentPatientLoading || isPatientRegistryLoading;
-  const navigate = useNavigate();
 
   const patientRegistry = patientRegistries?.nodes[0];
   const isCreatingPatient = !!createNewPatient;
@@ -230,6 +244,23 @@ const PatientDetailView = ({
     onEdit(isDirty);
   }, [isDirty, onEdit]);
 
+  useEffect(() => {
+    (async () => {
+      if (fromPrescription === true && currentPatient != null) {
+        const invoiceNumber = await createPrescription({
+          id: FnUtils.generateUUID(),
+          patientId: currentPatient.id,
+        });
+        navigate(
+          RouteBuilder.create(AppRoute.Dispensary)
+            .addPart(AppRoute.Prescription)
+            .addPart(String(invoiceNumber))
+            .build()
+        );
+      }
+    })();
+  }, [currentPatient]);
+
   const showSaveConfirmation = useConfirmationModal({
     onConfirm: save,
     message: t('messages.confirm-save-generic'),

client/packages/system/src/Patient/utils.ts

@@ -34,6 +34,7 @@ export interface PatientSearchModalProps {
   open: boolean;
   onClose: () => void;
   onChange: (name: SearchInputPatient) => void;
+  openPatientModal: () => void;
 }
 
 export const basicFilterOptions = {