From d38642d6345752424fac758ac460b370e06a3ee7 Mon Sep 17 00:00:00 2001
From: AJAL ODORA JONATHAN <43242517+ODORA0@users.noreply.github.com>
Date: Wed, 6 Mar 2024 11:00:50 +0300
Subject: [PATCH] O3-2887 Duplicate Bill items on Billing form (#18)

---
 src/billing-form/billing-form.component.tsx | 60 ++++++++++++++-------
 src/billing-form/billing-form.scss          |  6 +++
 2 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/billing-form/billing-form.component.tsx b/src/billing-form/billing-form.component.tsx
index 91ea508..5954893 100644
--- a/src/billing-form/billing-form.component.tsx
+++ b/src/billing-form/billing-form.component.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   ButtonSet,
   Button,
@@ -19,6 +19,7 @@ import { useFetchSearchResults, processBillItems } from '../billing.resource';
 import { mutate } from 'swr';
 import { convertToCurrency } from '../helpers';
 import { z } from 'zod';
+import { TrashCan } from '@carbon/react/icons';
 
 type BillingFormProps = {
   patientUuid: string;
@@ -35,6 +36,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
   const [searchVal, setSearchVal] = useState('');
   const [category, setCategory] = useState('');
   const [saveDisabled, setSaveDisabled] = useState<boolean>(false);
+  const [addedItems, setAddedItems] = useState([]);
 
   const toggleSearch = (choiceSelected) => {
     (document.getElementById('searchField') as HTMLInputElement).disabled = false;
@@ -95,11 +97,24 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     const updatedItems = [...billItems, newItem];
     setBillItems(updatedItems);
 
+    setAddedItems([...addedItems, newItem]);
+
     setSearchOptions([]);
     calculateTotalAfterAddBillItem(updatedItems);
     (document.getElementById('searchField') as HTMLInputElement).value = '';
   };
 
+  const removeItemFromBill = (uuid) => {
+    const updatedItems = billItems.filter((item) => item.uuid !== uuid);
+    setBillItems(updatedItems);
+
+    // Update the list of added items
+    setAddedItems(addedItems.filter((item) => item.uuid !== uuid));
+
+    const updatedGrandTotal = updatedItems.reduce((acc, item) => acc + item.Total, 0);
+    setGrandTotal(updatedGrandTotal);
+  };
+
   const { data, error, isLoading, isValidating } = useFetchSearchResults(searchVal, category);
 
   const filterItems = (val) => {
@@ -109,25 +124,28 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
       const res = data as { results: any[] };
 
       const options = res.results.map((o) => {
-        if (o.commonName && o.commonName !== '') {
-          return {
-            uuid: o.uuid || '',
-            Item: o.commonName,
-            Qnty: 1,
-            Price: 10,
-            Total: 10,
-            category: 'StockItem',
-          };
-        } else if (o.name.toLowerCase().includes(val.toLowerCase())) {
-          return {
-            uuid: o.uuid || '',
-            Item: o.name,
-            Qnty: 1,
-            Price: o.servicePrices[0].price,
-            Total: o.servicePrices[0].price,
-            category: 'Service',
-          };
+        if (!addedItems.some((item) => item.uuid === o.uuid)) {
+          if (o.commonName && o.commonName !== '') {
+            return {
+              uuid: o.uuid || '',
+              Item: o.commonName,
+              Qnty: 1,
+              Price: 10,
+              Total: 10,
+              category: 'StockItem',
+            };
+          } else if (o.name.toLowerCase().includes(val.toLowerCase())) {
+            return {
+              uuid: o.uuid || '',
+              Item: o.name,
+              Qnty: 1,
+              Price: o.servicePrices[0].price,
+              Total: o.servicePrices[0].price,
+              category: 'Service',
+            };
+          }
         }
+        return null;
       });
 
       setSearchOptions(options.filter((option) => option)); // Filter out undefined/null values
@@ -229,6 +247,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
             <TableHeader>Quantity</TableHeader>
             <TableHeader>Price</TableHeader>
             <TableHeader>Total</TableHeader>
+            <TableHeader>Action</TableHeader>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -254,6 +273,9 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
                 <TableCell id={row.Item + 'Total'} className="totalValue">
                   {row.Total}
                 </TableCell>
+                <TableCell>
+                  <TrashCan onClick={() => removeItemFromBill(row.uuid)} className={styles.removeButton} />
+                </TableCell>
               </TableRow>
             ))
           ) : (
diff --git a/src/billing-form/billing-form.scss b/src/billing-form/billing-form.scss
index 84bf475..0fa8adb 100644
--- a/src/billing-form/billing-form.scss
+++ b/src/billing-form/billing-form.scss
@@ -26,4 +26,10 @@
 
 .invalidInput {
   border: 2px solid red;
+}
+
+.removeButton {
+  color: #ee0909;
+  right: 20px;
+  cursor: pointer;
 }
\ No newline at end of file