(feat) Add patient banner on invoce page (#72)

packages/esm-billing-app/src/bills-table/bills-table.component.tsx

@@ -92,7 +92,7 @@ const BillsTable = () => {
     patientName: (
       <ConfigurableLink
         style={{ textDecoration: 'none', maxWidth: '50%' }}
-        to={`${window.getOpenmrsSpaBase()}patient/${bill.patientUuid}/chart`}>
+        to={`${window.getOpenmrsSpaBase()}home/billing/patient/${bill.patientUuid}`}>
         {bill.patientName}
       </ConfigurableLink>
     ),

packages/esm-billing-app/src/invoice/invoce.component.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { InlineLoading } from '@carbon/react';
+import { ExtensionSlot, usePatient } from '@openmrs/esm-framework';
+import { useParams } from 'react-router-dom';
+import styles from './invoice.scss';
+
+type InvoiceProps = {};
+
+const Invoice: React.FC<InvoiceProps> = () => {
+  const params = useParams();
+  const { patient, patientUuid, isLoading } = usePatient(params?.patientUuid);
+
+  if (isLoading) {
+    return <InlineLoading status="active" iconDescription="Loading" description="Loading patient info..." />;
+  }
+
+  return (
+    <div className={styles.invoiceContainer}>
+      <ExtensionSlot name="patient-header-slot" state={{ patient, patientUuid }} />
+    </div>
+  );
+};
+
+export default Invoice;

packages/esm-billing-app/src/invoice/invoice.scss

@@ -0,0 +1,6 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.invoiceContainer {
+  margin: layout.$spacing-03 layout.$spacing-05;
+}

packages/esm-billing-app/src/root.component.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { BillingDashboard } from './billing-dashboard/billing-dashboard.component';
+import Invoice from './invoice/invoce.component';
 
 const RootComponent: React.FC = () => {
   const baseName = window.getOpenmrsSpaBase() + 'home/billing';
@@ -9,6 +10,7 @@ const RootComponent: React.FC = () => {
     <BrowserRouter basename={baseName}>
       <Routes>
         <Route path="/" element={<BillingDashboard />} />
+        <Route path="/patient/:patientUuid" element={<Invoice />} />
       </Routes>
     </BrowserRouter>
   );