From 4049f795bd076826f0efcd3a33e90d4008d82229 Mon Sep 17 00:00:00 2001
From: lucille <lucyjemutai.2019@gmail.com>
Date: Wed, 30 Oct 2024 10:39:06 +0300
Subject: [PATCH] revert back to use Dropdown for consistency

---
 src/billable-services/billable-services.scss  | 10 ------
 .../add-billable-service.component.tsx        | 32 ++++++-------------
 .../create-edit/add-billable-service.scss     |  9 ------
 3 files changed, 10 insertions(+), 41 deletions(-)

diff --git a/src/billable-services/billable-services.scss b/src/billable-services/billable-services.scss
index d9c06e3..9413dc5 100644
--- a/src/billable-services/billable-services.scss
+++ b/src/billable-services/billable-services.scss
@@ -217,13 +217,3 @@
   grid-template-columns: 16rem 1fr;
 }
 
-.always-visible-overflow-menu {
-  .cds--overflow-menu {
-    opacity: 1 !important;
-    visibility: visible !important;
-  }
-
-  .cds--overflow-menu-options__btn {
-    display: block !important;
-  }
-}
diff --git a/src/billable-services/create-edit/add-billable-service.component.tsx b/src/billable-services/create-edit/add-billable-service.component.tsx
index f0434b0..7e69177 100644
--- a/src/billable-services/create-edit/add-billable-service.component.tsx
+++ b/src/billable-services/create-edit/add-billable-service.component.tsx
@@ -10,7 +10,6 @@ import {
   Search,
   TextInput,
   Tile,
-  Select,
 } from '@carbon/react';
 import { navigate, showSnackbar, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import { Add, TrashCan, WarningFilled } from '@carbon/react/icons';
@@ -318,27 +317,16 @@ const AddBillableService: React.FC<{ editingService?: any; onClose: () => void }
                 name={`payment.${index}.paymentMode`}
                 render={({ field }) => (
                   <Layer>
-                    <label className="selectLabel">Payment Method</label>
-                    <select
-                      onChange={(e) => {
-                        const selectedMode = paymentModes.find((mode) => mode.uuid === e.target.value);
-                        field.onChange(selectedMode?.uuid);
-                      }}
-                      aria-label={t('selectPaymentMethod', 'Select payment method')}
-                      value={field.value || ''}
-                      className={`${styles.largeSelect} ${errors?.payment?.[index]?.paymentMode ? 'invalid' : ''}`}>
-                      <option value="" disabled>
-                        {t('paymentMode', 'Payment Mode')}
-                      </option>
-                      {paymentModes?.map((mode) => (
-                        <option key={mode.uuid} value={mode.uuid}>
-                          {mode.name}
-                        </option>
-                      ))}
-                    </select>
-                    {errors?.payment?.[index]?.paymentMode && (
-                      <span className="error-text">{errors.payment[index].paymentMode.message}</span>
-                    )}
+                    <Dropdown
+                      onChange={({ selectedItem }) => field.onChange(selectedItem.uuid)}
+                      titleText={t('paymentMode', 'Payment Mode')}
+                      label={t('selectPaymentMethod', 'Select payment method')}
+                      items={paymentModes ?? []}
+                      itemToString={(item) => (item ? item.name : '')}
+                      selectedItem={paymentModes.find((mode) => mode.uuid === field.value)}
+                      invalid={!!errors?.payment?.[index]?.paymentMode}
+                      invalidText={errors?.payment?.[index]?.paymentMode?.message}
+                    />
                   </Layer>
                 )}
               />
diff --git a/src/billable-services/create-edit/add-billable-service.scss b/src/billable-services/create-edit/add-billable-service.scss
index 9438a65..8d210fc 100644
--- a/src/billable-services/create-edit/add-billable-service.scss
+++ b/src/billable-services/create-edit/add-billable-service.scss
@@ -129,12 +129,3 @@
     min-height: layout.$spacing-05;
   }
 }
-
-.largeSelect,
-select.largeSelect {
-  width: 100%;
-  height: 2.5em;
-  padding: 0.5em;
-  font-size: 1em;
-  margin-top: 1em;
-}
\ No newline at end of file