KHP3-6174 - (feat) added a UI for the showing prices

packages/esm-billing-app/src/billable-services/billiable-item/test-order/lab-oder.scss

@@ -0,0 +1,21 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
+@use '@carbon/colors';
+@import '@openmrs/esm-styleguide/src/vars';
+
+.prices {
+  justify-content: center;
+  align-items: center;
+  margin: layout.$spacing-03;
+}
+
+.listContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.cell {
+  padding: spacing.$spacing-05;
+}

packages/esm-billing-app/src/billable-services/billiable-item/test-order/lab-order.component.tsx

@@ -1,6 +1,17 @@
 import React from 'react';
 import { convertToCurrency } from '../../../helpers';
 import { useBillableItem } from '../useBillableItem';
+import { useTranslation } from 'react-i18next';
+import styles from './lab-oder.scss';
+import {
+  InlineNotification,
+  StructuredListWrapper,
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListCell,
+  StructuredListBody,
+  Tile,
+} from '@carbon/react';
 
 type LabOrderProps = {
   order: {
@@ -12,23 +23,58 @@ type LabOrderProps = {
 };
 
 const LabOrder: React.FC<LabOrderProps> = ({ order }) => {
-  // TODO: Implement logic to display whether the lab order service is available to ensure clinicians can order the service
-
-  const { billableItem, error, isLoading } = useBillableItem(order?.testType?.conceptUuid);
-
-  const billItems = billableItem?.servicePrices
-    .map((servicePrice) => `${servicePrice?.paymentMode?.name} - ${convertToCurrency(servicePrice?.price)}`)
-    .join(' ');
+  const { t } = useTranslation();
+  const { billableItem, isLoading, error } = useBillableItem(order?.testType?.conceptUuid);
 
   if (isLoading) {
-    return null;
+    return (
+      <InlineNotification
+        kind="info"
+        title={t('loadingPrices', 'Loading prices')}
+        subtitle={t('pleaseWait', 'Please wait...')}
+        lowContrast
+      />
+    );
   }
 
-  if (error) {
-    return null;
+  if (error || !billableItem) {
+    return (
+      <InlineNotification
+        kind="info"
+        title={t('noprice', 'No price found ')}
+        subtitle={t('noInfo', 'Please contact the cashier')}
+        lowContrast
+      />
+    );
   }
 
-  return <p>{billItems}</p>;
+  return (
+    <Tile id="" className={styles.prices}>
+      <div className={styles.listContainer}>
+        <StructuredListWrapper isCondensed>
+          A
+          <StructuredListHead>
+            <StructuredListRow head>
+              <StructuredListCell head className={styles.cell}>
+                {t('paymentMethods', 'Payment methods')}
+              </StructuredListCell>
+              <StructuredListCell head className={styles.cell}>
+                {t('prices', 'Prices(Ksh)')}
+              </StructuredListCell>
+            </StructuredListRow>
+          </StructuredListHead>
+          <StructuredListBody>
+            {billableItem.servicePrices.map((priceItem) => (
+              <StructuredListRow key={priceItem.uuid}>
+                <StructuredListCell className={styles.cell}>{priceItem.paymentMode.name}</StructuredListCell>
+                <StructuredListCell className={styles.cell}>{convertToCurrency(priceItem.price)}</StructuredListCell>
+              </StructuredListRow>
+            ))}
+          </StructuredListBody>
+        </StructuredListWrapper>
+      </div>
+    </Tile>
+  );
 };
 
 export default LabOrder;

packages/esm-billing-app/translations/en.json

@@ -78,29 +78,34 @@
   "loading": "Loading",
   "loadingBillingServices": "Loading billing services...",
   "loadingDescription": "Loading",
+  "loadingPrices": "Loading prices",
   "makeclaims": "Make Claims",
   "manageBillableServices": "Manage billable services",
   "mpesaPayment": "MPESA Payment",
   "name": "Name",
   "navigateBack": "Navigate back",
   "nextPage": "Next page",
   "noBillDisplay": "There are no bills to display for this patient",
+  "noInfo": "Please contact the cashier",
   "noMatchingBillsToDisplay": "No matching bills to display",
   "noMatchingItemsToDisplay": "No matching items to display",
   "noMatchingServicesToDisplay": "No matching services to display",
+  "noprices": "No procedural price found ",
   "noResultsFor": "No results for",
   "noServicesToDisplay": "There are no services to display",
   "patientBilling": "Patient Billing",
   "patientBillingAlert": "Patient Billing Alert",
   "patientBills": "Patient bill",
   "patientBillsDescription": "List of patient bills",
   "paymentMethod": "Payment method",
+  "paymentMethods": "Payment methods",
   "paymentMethodsTitle": "Payment methods",
   "paymentMode": "Payment Mode",
   "paymentPayment": "Bill Payment",
   "payments": "Payments",
   "Phone Number": "Phone Number",
   "pickLabRequest": "Pick Lab Request",
+  "pleaseWait": "Please wait...",
   "policyNumber": "Policy number",
   "postWaiver": "Post waiver",
   "previousPage": "Previous page",

packages/esm-pharmacy-app/translations/en.json

@@ -8,6 +8,7 @@
   "contact": "Contact",
   "countyDistrict": "County District",
   "dateMapped": "Date Mapped",
+  "enroll": "Enroll new body",
   "name": "NAME",
   "noCommunityPharmacyToList": "No Community Pharmacies to list.",
   "noPharmacyPatients": "No Pharmacy Patients to list.",
@@ -17,6 +18,7 @@
   "pharmacies": "Phamacies",
   "pharmacy": "Commity pharmacy",
   "pharmacyPatients": "Pharmacy Patients",
+  "pharmacySummary": "Pharmacy Summary",
   "pharmacyUsers": "Pharmacy Users",
   "sex": "Sex",
   "stateProvince": "State province",