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

* (feat) added a UI for the showing prices

* (refactor) the inline notification msg

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

Co-authored-by: Donald Kibet <[email protected]>

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

Co-authored-by: Donald Kibet <[email protected]>

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

Co-authored-by: Donald Kibet <[email protected]>

* (refactor) translation

* (fix) fails on build

* (feat) translations

* (feat) separating the radiology and procedure functionality from lab-order

* (chore) removed lab-order functionality and introduced for procedure and radiology

* (refactor) translation

---------

Co-authored-by: Donald Kibet <[email protected]>

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useBillableItem } from '../useBillableItem';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading } from '@carbon/react';
+import PriceInfoOrder from './price-info-order.componet';
+
+type ImagingOrderProps = {
+  order: {
+    testType?: {
+      label: string;
+      conceptUuid: string;
+    };
+  };
+};
+
+const ImagingOrder: React.FC<ImagingOrderProps> = ({ order }) => {
+  const { t } = useTranslation();
+  const { billableItem, isLoading, error } = useBillableItem(order?.testType?.conceptUuid);
+
+  if (isLoading) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loading', 'Loading')}
+        description={t('loadingData', 'Loading data...')}
+      />
+    );
+  }
+
+  return <PriceInfoOrder billableItem={billableItem} error={error} />;
+};
+
+export default ImagingOrder;

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { convertToCurrency } from '../../../helpers';
 import { useBillableItem } from '../useBillableItem';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading } from '@carbon/react';
+import PriceInfoOrder from './price-info-order.componet';
 
 type LabOrderProps = {
   order: {
@@ -12,23 +14,20 @@ 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;
-  }
-
-  if (error) {
-    return null;
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loading', 'Loading')}
+        description={t('loadingData', 'Loading data...')}
+      />
+    );
   }
 
-  return <p>{billItems}</p>;
+  return <PriceInfoOrder billableItem={billableItem} error={error} />;
 };
 
 export default LabOrder;

packages/esm-billing-app/src/billable-services/billiable-item/test-order/price-info-order.componet.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { convertToCurrency } from '../../../helpers';
+import { useTranslation } from 'react-i18next';
+import styles from './price-info-order.scss';
+import {
+  StructuredListWrapper,
+  StructuredListHead,
+  StructuredListRow,
+  StructuredListCell,
+  StructuredListBody,
+  Tile,
+  InlineNotification,
+} from '@carbon/react';
+
+type PriceInfoOrderProps = {
+  billableItem: any;
+  error?: boolean;
+};
+
+const PriceInfoOrder: React.FC<PriceInfoOrderProps> = ({ billableItem, error }) => {
+  const { t } = useTranslation();
+
+  if (error || !billableItem) {
+    return (
+      <InlineNotification
+        kind="info"
+        title={t('noprice', 'No price found')}
+        subtitle={t('noInfo', 'Please contact the cashier')}
+        lowContrast
+      />
+    );
+  }
+
+  return (
+    <Tile id="" className={styles.prices}>
+      <div className={styles.listContainer}>
+        <StructuredListWrapper isCondensed>
+          <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 PriceInfoOrder;

packages/esm-billing-app/src/billable-services/billiable-item/test-order/price-info-order.scss

@@ -0,0 +1,20 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.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/procedure-order.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useBillableItem } from '../useBillableItem';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading } from '@carbon/react';
+import PriceInfoOrder from './price-info-order.componet';
+
+type ProcedureOrderProps = {
+  order: {
+    testType?: {
+      label: string;
+      conceptUuid: string;
+    };
+  };
+};
+
+const ProcedureOrder: React.FC<ProcedureOrderProps> = ({ order }) => {
+  const { t } = useTranslation();
+  const { billableItem, isLoading, error } = useBillableItem(order?.testType?.conceptUuid);
+
+  if (isLoading) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loading', 'Loading')}
+        description={t('loadingData', 'Loading data...')}
+      />
+    );
+  }
+
+  return <PriceInfoOrder billableItem={billableItem} error={error} />;
+};
+
+export default ProcedureOrder;

packages/esm-billing-app/src/index.ts

@@ -15,6 +15,9 @@ import InitiatePaymentDialog from './invoice/payments/initiate-payment/initiate-
 import DrugOrder from './billable-services/billiable-item/drug-order/drug-order.component';
 import LabOrder from './billable-services/billiable-item/test-order/lab-order.component';
 import TestOrderAction from './billable-services/billiable-item/test-order/test-order-action.component';
+import PriceInfoOrder from './billable-services/billiable-item/test-order/price-info-order.componet';
+import ProcedureOrder from './billable-services/billiable-item/test-order/procedure-order.component';
+import ImagingOrder from './billable-services/billiable-item/test-order/imaging-order.component';
 
 const moduleName = '@kenyaemr/esm-billing-app';
 
@@ -52,5 +55,8 @@ export const requirePaymentModal = getSyncLifecycle(RequirePaymentModal, options
 export const visitAttributeTags = getSyncLifecycle(VisitAttributeTags, options);
 export const initiatePaymentDialog = getSyncLifecycle(InitiatePaymentDialog, options);
 export const labOrder = getSyncLifecycle(LabOrder, options);
+export const priceInfoOrder = getSyncLifecycle(PriceInfoOrder, options);
+export const procedureOrder = getSyncLifecycle(ProcedureOrder, options);
+export const imagingOrder = getSyncLifecycle(ImagingOrder, options);
 export const drugOrder = getSyncLifecycle(DrugOrder, options);
 export const testOrderAction = getSyncLifecycle(TestOrderAction, options);

packages/esm-billing-app/src/routes.json

@@ -85,6 +85,20 @@
       "component": "labOrder",
       "slot": "top-of-lab-order-form-slot"
     },
+    {
+      "name": "procedure-order-billable-item",
+      "component": "procedureOrder",
+      "slot": "top-of-procedure-order-form-slot"
+    },
+    {
+      "name": "imaging-order-billable-item",
+      "component": "imagingOrder",
+      "slot": "top-of-imaging-order-form-slot"
+    },
+    {
+      "name": "price-info-order",
+      "component": "priceInfoOrder"
+    },
     {
       "name": "drug-order-billable-item",
       "component": "drugOrder",
@@ -97,4 +111,4 @@
       "order": 0
     }
   ]
-}
+}

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

@@ -77,6 +77,7 @@
   "lineItems": "Line items",
   "loading": "Loading",
   "loadingBillingServices": "Loading billing services...",
+  "loadingData": "Loading data...",
   "loadingDescription": "Loading",
   "makeclaims": "Make Claims",
   "manageBillableServices": "Manage billable services",