@openmrs/esm-billing-app 1.0.2-pre.112 → 1.0.2-pre.1124

package/src/billable-services/bill-waiver/bill-waiver-form.component.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import { Form, Stack, FormGroup, Layer, Button, NumberInput } from '@carbon/react';
+import React, { useState } from 'react';
+import { Button, Form, FormGroup, Layer, NumberInput, Stack } from '@carbon/react';
 import { TaskAdd } from '@carbon/react/icons';
-import { mutate } from 'swr';
+import { useSWRConfig } from 'swr';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar, useConfig } from '@openmrs/esm-framework';
 import { createBillWaiverPayload } from './utils';
-import { convertToCurrency } from '../../helpers';
+import { calculateTotalAmount, convertToCurrency } from '../../helpers';
 import { processBillPayment } from '../../billing.resource';
 import { useBillableItems } from '../../billing-form/billing-form.resource';
 import type { LineItem, MappedBill } from '../../types';
@@ -20,16 +20,17 @@ type BillWaiverFormProps = {
 
 const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPatientUuid }) => {
   const { t } = useTranslation();
-  const [waiverAmount, setWaiverAmount] = React.useState(0);
-  const { lineItems: billableLineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
-  const totalAmount = lineItems.reduce((acc, curr) => acc + curr.price * curr.quantity, 0);
+  const [waiverAmount, setWaiverAmount] = useState(0);
+  const { lineItems: billableLineItems } = useBillableItems();
+  const totalAmount = calculateTotalAmount(lineItems);
   const { defaultCurrency } = useConfig();
+  const { mutate } = useSWRConfig();
 
   if (lineItems?.length === 0) {
     return null;
   }
 
-  const handleProcessPayment = (event) => {
+  const handleProcessPayment = async () => {
     const waiverEndPointPayload = createBillWaiverPayload(
       bill,
       waiverAmount,
@@ -38,30 +39,26 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
       billableLineItems,
     );
 
-    processBillPayment(waiverEndPointPayload, bill.uuid).then(
-      (resp) => {
-        showSnackbar({
-          title: t('billWaiver', 'Bill waiver'),
-          subtitle: t('billWaiverSuccess', 'Bill waiver successful'),
-          kind: 'success',
-          timeoutInMs: 3500,
-          isLowContrast: true,
-        });
-        setPatientUuid('');
-        mutate((key) => typeof key === 'string' && key.startsWith(`${apiBasePath}bill?v=full`), undefined, {
-          revalidate: true,
-        });
-      },
-      (err) => {
-        showSnackbar({
-          title: t('billWaiver', 'Bill waiver'),
-          subtitle: t('billWaiverError', 'Bill waiver failed {{error}}', { error: err.message }),
-          kind: 'error',
-          timeoutInMs: 3500,
-          isLowContrast: true,
-        });
-      },
-    );
+    try {
+      await processBillPayment(waiverEndPointPayload, bill.uuid);
+      showSnackbar({
+        title: t('billWaiver', 'Bill waiver'),
+        subtitle: t('billWaiverSuccess', 'Bill waiver successful'),
+        kind: 'success',
+        isLowContrast: true,
+      });
+      setPatientUuid('');
+      mutate((key) => typeof key === 'string' && key.startsWith(`${apiBasePath}bill?v=full`), undefined, {
+        revalidate: true,
+      });
+    } catch (error) {
+      showSnackbar({
+        title: t('billWaiver', 'Bill waiver'),
+        subtitle: t('billWaiverError', 'Bill waiver failed {{error}}', { error: error?.message }),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
   };
 
   return (
@@ -72,7 +69,7 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
           <section className={styles.billWaiverDescription}>
             <label className={styles.label}>{t('billItems', 'Bill Items')}</label>
             <p className={styles.value}>
-              {t('billName', ' {{billName}} ', {
+              {t('billName', '{{billName}}', {
                 billName: lineItems.map((item) => item.item || item.billableService).join(', ') ?? '--',
               })}
             </p>
@@ -84,16 +81,17 @@ const BillWaiverForm: React.FC<BillWaiverFormProps> = ({ bill, lineItems, setPat
 
           <Layer className={styles.formControlLayer}>
             <NumberInput
-              label={t('amountToWaiveLabel', 'Amount to Waive')}
-              helperText={t('amountToWaiveHelper', 'Specify the amount to be deducted from the bill')}
+              allowEmpty
               aria-label={t('amountToWaiveAriaLabel', 'Enter amount to waive')}
-              hideSteppers
               disableWheel
-              min={0}
-              max={totalAmount}
+              helperText={t('amountToWaiveHelper', 'Specify the amount to be deducted from the bill')}
+              hideSteppers
               invalidText={t('invalidWaiverAmount', 'Invalid waiver amount')}
-              value={waiverAmount}
+              label={t('amountToWaiveLabel', 'Amount to waive')}
+              max={totalAmount}
+              min={0}
               onChange={(event) => setWaiverAmount(event.target.value)}
+              value={waiverAmount}
             />
           </Layer>
         </FormGroup>

package/src/billable-services/bill-waiver/patient-bills.component.tsx

@@ -37,9 +37,9 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
   }
 
   const tableHeaders = [
-    { header: 'Date', key: 'date' },
-    { header: 'Billable Service', key: 'billableService' },
-    { header: 'Total Amount', key: 'totalAmount' },
+    { header: t('date', 'Date'), key: 'date' },
+    { header: t('billableService', 'Billable service'), key: 'billableService' },
+    { header: t('totalAmount', 'Total amount'), key: 'totalAmount' },
   ];
 
   const tableRows = bills.map((bill) => ({
@@ -58,7 +58,7 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
               <div className={styles.illo}>
                 <EmptyDataIllustration />
               </div>
-              <p className={styles.content}>{t('noBilltoDisplay', 'There are no bills to display for this patient')}</p>
+              <p className={styles.content}>{t('noBillToDisplay', 'There are no bills to display for this patient')}</p>
             </Tile>
           </Layer>
         </div>
@@ -84,13 +84,13 @@ const PatientBills: React.FC<PatientBillsProps> = ({ patientUuid, bills, setPati
           getTableContainerProps,
         }) => (
           <TableContainer
-            title={t('patientBills', 'Patient bill')}
+            title={t('patientBills', 'Patient bills')}
             description={t('patientBillsDescription', 'List of patient bills')}
             {...getTableContainerProps()}>
-            <Table {...getTableProps()} aria-label="sample table">
+            <Table {...getTableProps()} aria-label={t('billsTable', 'Bills table')}>
               <TableHead>
                 <TableRow>
-                  <TableExpandHeader enableToggle={true} {...getExpandHeaderProps()} />
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
                   {headers.map((header, i) => (
                     <TableHeader
                       key={i}

package/src/billable-services/bill-waiver/utils.ts

@@ -1,6 +1,7 @@
 import { type OpenmrsResource } from '@openmrs/esm-framework';
-import type { LineItem, MappedBill } from '../../types';
+import type { LineItem, MappedBill, PaymentPayload } from '../../types';
 
+// TODO: Move this UUID to the config schema
 const WAIVER_UUID = 'eb6173cb-9678-4614-bbe1-0ccf7ed9d1d4';
 
 export const createBillWaiverPayload = (
@@ -12,7 +13,7 @@ export const createBillWaiverPayload = (
 ) => {
   const { cashier } = bill;
 
-  const billPayment = {
+  const billPayment: PaymentPayload = {
     amount: parseFloat(totalAmount.toFixed(2)),
     amountTendered: parseFloat(Number(amountWaived).toFixed(2)),
     attributes: [],
@@ -25,11 +26,20 @@ export const createBillWaiverPayload = (
     paymentStatus: 'PAID',
   }));
 
+  // Transform existing payments to PaymentPayload format
+  const existingPayments: PaymentPayload[] = bill.payments.map((payment) => ({
+    amount: payment.amount,
+    amountTendered: payment.amountTendered,
+    attributes: payment.attributes,
+    instanceType: payment.instanceType.uuid,
+    dateCreated: payment.dateCreated,
+  }));
+
   const processedPayment = {
     cashPoint: bill.cashPointUuid,
     cashier: cashier.uuid,
     lineItems: processedLineItems,
-    payments: [...bill.payments, billPayment],
+    payments: [...existingPayments, billPayment],
     patient: bill.patientUuid,
   };
 

package/src/billable-services/{create-edit/add-billable-service.scss → billable-service-form/billable-service-form.scss}

@@ -10,33 +10,8 @@
   height: 100%;
 }
 
-.section {
-  margin: layout.$spacing-03;
-}
-
-.sectionTitle {
-  @include type.type-style('heading-compact-02');
-  color: $text-02;
-  margin-bottom: layout.$spacing-04;
-}
-
-.modalBody {
-  padding-bottom: layout.$spacing-05;
-}
-
-.container {
-  margin: layout.$spacing-05;
-}
-
-.paymentContainer {
-  margin: layout.$layout-01;
-  padding: layout.$layout-01;
-  width: 70%;
-  border-right: 1px solid colors.$cool-gray-40;
-}
-
 .paymentButtons {
-  margin: layout.$layout-01 0;
+  margin: layout.$spacing-05 0;
 }
 
 .paymentMethodContainer {
@@ -48,22 +23,6 @@
   width: 100%;
 }
 
-.paymentTotals {
-  margin-top: layout.$spacing-01;
-}
-
-.processPayments {
-  display: flex;
-  justify-content: flex-end;
-  margin: layout.$spacing-05;
-  column-gap: layout.$spacing-04;
-}
-
-.errorPaymentContainer {
-  margin: layout.$spacing-04;
-  min-height: layout.$spacing-09;
-}
-
 .removeButtonContainer {
   display: flex;
   align-self: center;
@@ -99,39 +58,48 @@
 
 .conceptLabel {
   @include type.type-style('label-02');
-  margin: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
 }
 
-.errorContainer {
-  margin: layout.$spacing-05;
+.errorMessage {
+  @include type.type-style('label-02');
+  color: $danger;
+  margin-bottom: layout.$spacing-05;
 }
 
-.serviceError {
-  :global(.cds--search-input):focus {
-    outline: 2.5px solid $danger;
+.loader {
+  padding: layout.$spacing-04 layout.$spacing-03;
+}
+
+.serviceNameLabel {
+  @include type.type-style('body-compact-02');
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+
+  :global(.cds--inline-loading) {
+    min-height: layout.$spacing-05 !important;
   }
 
-  :global(.cds--search-magnifier) {
-    svg {
-      fill: $danger;
-    }
+  :global(.cds--inline-loading__text) {
+    @include type.type-style('body-01');
   }
 }
 
-.errorMessage {
-  @include type.type-style('label-02');
-  color: $danger;
-  margin-top: 0.5rem;
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: $ui-02;
 }
 
-.spinner {
-  &:global(.cds--inline-loading) {
-    min-height: layout.$spacing-05;
-  }
+.desktop {
+  padding: 0;
 }
 
-.errorMessage {
-  color: red;
-  font-size: 0.875rem;
+.stack {
+  margin: layout.$spacing-05;
 }
-