From 9325e7171cc2f066a33138cc6e9b4541fd2c4b09 Mon Sep 17 00:00:00 2001
From: Amos Machora <amosmachora13@gmail.com>
Date: Tue, 23 Jul 2024 10:53:37 +0300
Subject: [PATCH] refactor: changes from code review

---
 .../bill-line-items.component.tsx             |  2 +-
 .../bill-manager/modals/cancel-bill.modal.tsx |  6 +++--
 .../bill-manager/modals/cancel-bill.scss      | 26 +++----------------
 .../bill-manager/patient-bills.component.tsx  | 16 +++++-------
 .../workspaces/waive-bill-form.scss           |  6 ++---
 .../workspaces/waive-bill-form.workspace.tsx  |  2 +-
 packages/esm-billing-app/src/index.ts         |  1 -
 packages/esm-billing-app/translations/en.json |  3 +--
 8 files changed, 20 insertions(+), 42 deletions(-)

diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/bill-line-items.component.tsx b/packages/esm-billing-app/src/billable-services/bill-manager/bill-line-items.component.tsx
index 002a42280..2d6eaa858 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/bill-line-items.component.tsx
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/bill-line-items.component.tsx
@@ -21,7 +21,7 @@ const BillLineItems: React.FC<{ bill: MappedBill }> = ({ bill }) => {
 
   const handleOpenEditLineItemWorkspace = (lineItem: LineItem) => {
     launchWorkspace('edit-bill-form', {
-      workspaceTitle: t('editBillForm' , 'Edit Bill Form'),
+      workspaceTitle: t('editBillForm', 'Edit Bill Form'),
       lineItem,
     });
   };
diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.modal.tsx b/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.modal.tsx
index 7565b2598..94bf68aa2 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.modal.tsx
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.modal.tsx
@@ -1,17 +1,19 @@
 import React from 'react';
 import { ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
 import styles from './cancel-bill.scss';
+import { useTranslation } from 'react-i18next';
 
 export const CancelBillModal: React.FC<{
   onClose: () => void;
 }> = ({ onClose }) => {
+  const { t } = useTranslation();
   return (
     <React.Fragment>
       <ModalHeader onClose={onClose} className={styles.modalHeaderLabel} closeModal={onClose}>
-        Cancel bill
+        {t('cancelBill', 'Cancel Bill')}
       </ModalHeader>
       <ModalBody className={styles.modalHeaderHeading}>
-        Are you sure you want to cancel this bill? Proceed cautiously.
+        {t('cancelBillDescription', 'Are you sure you want to cancel this bill? Proceed cautiously.')}
       </ModalBody>
       <ModalFooter>
         <Button kind="secondary" onClick={onClose}>
diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.scss b/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.scss
index 629b84dea..75b7e575e 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.scss
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/modals/cancel-bill.scss
@@ -1,27 +1,9 @@
+@use '@carbon/type';
+
 .modalHeaderLabel {
-  box-sizing: border-box;
-  font-family: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  font-size: var(--cds-label-01-font-size, 0.75rem);
-  font-weight: var(--cds-label-01-font-weight, 400);
-  line-height: var(--cds-label-01-line-height, 1.33333);
-  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
-  color: var(--cds-text-secondary, #525252);
-  -webkit-margin-after: 0.25rem;
-  margin-block-end: 0.25rem;
+  @include type.type-style('label-02');
 }
 
 .modalHeaderHeading {
-  box-sizing: border-box;
-  font-family: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
-  font-size: var(--cds-heading-03-font-size, 1.25rem);
-  font-weight: var(--cds-heading-03-font-weight, 400);
-  line-height: var(--cds-heading-03-line-height, 1.4);
-  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
-  color: var(--cds-text-primary, #161616);
-  -webkit-padding-end: calc(20% - 3rem);
-  padding-inline-end: calc(20% - 3rem);
+  @include type.type-style('heading-compact-02');
 }
diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/patient-bills.component.tsx b/packages/esm-billing-app/src/billable-services/bill-manager/patient-bills.component.tsx
index 11e1e8b5a..baff46450 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/patient-bills.component.tsx
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/patient-bills.component.tsx
@@ -17,7 +17,7 @@ import {
 } from '@carbon/react';
 import { convertToCurrency, extractString } from '../../helpers';
 import { useTranslation } from 'react-i18next';
-import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import { EmptyDataIllustration, EmptyState } from '@openmrs/esm-patient-common-lib';
 import { MappedBill } from '../../types';
 import styles from '../../bills-table/bills-table.scss';
 import BillLineItems from './bill-line-items.component';
@@ -53,15 +53,11 @@ const PatientBills: React.FC<PatientBillsProps> = ({ bills }) => {
 
   if (bills.length === 0) {
     return (
-      <div style={{ marginTop: '0.625rem' }}>
-        <Layer className={styles.emptyStateContainer}>
-          <Tile className={styles.tile}>
-            <div className={styles.illo}>
-              <EmptyDataIllustration />
-            </div>
-            <p className={styles.content}>{t('noBillDisplay', 'There are no bills to display for this patient')}</p>
-          </Tile>
-        </Layer>
+      <div style={{ marginTop: '1rem' }}>
+        <EmptyState
+          displayText={t('noBillDisplay', 'There are no bills to display for this patient')}
+          headerTitle="No bills"
+        />
       </div>
     );
   }
diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/workspaces/waive-bill-form.scss b/packages/esm-billing-app/src/billable-services/bill-manager/workspaces/waive-bill-form.scss
index d420959b8..0cc9946f4 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/workspaces/waive-bill-form.scss
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/workspaces/waive-bill-form.scss
@@ -33,7 +33,7 @@
   @include type.type-style('body-01');
 }
 
-.caseFormTitle {
+.formTitle {
   @include type.type-style('heading-02');
   display: flex;
   align-items: center;
@@ -57,6 +57,6 @@
   }
 }
 
-.editFormInput{
+.editFormInput {
   margin-bottom: spacing.$spacing-05;
-}
\ No newline at end of file
+}
diff --git a/packages/esm-billing-app/src/billable-services/bill-manager/workspaces/waive-bill-form.workspace.tsx b/packages/esm-billing-app/src/billable-services/bill-manager/workspaces/waive-bill-form.workspace.tsx
index dcc6ed84e..4df58817f 100644
--- a/packages/esm-billing-app/src/billable-services/bill-manager/workspaces/waive-bill-form.workspace.tsx
+++ b/packages/esm-billing-app/src/billable-services/bill-manager/workspaces/waive-bill-form.workspace.tsx
@@ -87,7 +87,7 @@ export const WaiveBillForm: React.FC<BillWaiverFormProps> = ({ bill }) => {
 
   return (
     <Form className={styles.form} aria-label={t('waiverForm', 'Waiver form')} onSubmit={handleSubmit(onSubmit)}>
-      <span className={styles.caseFormTitle}>{t('formTitle', 'Fill in the form details')}</span>
+      <span className={styles.formTitle}>{t('formTitle', 'Fill in the form details')}</span>
       <Stack gap={7}>
         <FormGroup>
           <section className={styles.billWaiverDescription}>
diff --git a/packages/esm-billing-app/src/index.ts b/packages/esm-billing-app/src/index.ts
index 3ffc7d319..f62057bea 100644
--- a/packages/esm-billing-app/src/index.ts
+++ b/packages/esm-billing-app/src/index.ts
@@ -23,7 +23,6 @@ import PriceInfoOrder from './billable-services/billiable-item/test-order/price-
 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';
 
 const options = {
diff --git a/packages/esm-billing-app/translations/en.json b/packages/esm-billing-app/translations/en.json
index 0e485c6bc..d331dced7 100644
--- a/packages/esm-billing-app/translations/en.json
+++ b/packages/esm-billing-app/translations/en.json
@@ -41,6 +41,7 @@
   "discard": "Discard",
   "discardClaim": "Discard Claim",
   "discount": "Discount",
+  "editBillForm": "Edit Bill Form",
   "enterAmount": "Enter amount",
   "enterConcept": "Associated concept",
   "enterReferenceNumber": "Enter ref. number",
@@ -122,7 +123,6 @@
   "selectExemptionCategory": "Select exemption category",
   "selectitemstobeclaimed": "Select items that are to be included in the claims",
   "selectPaymentMethod": "Select payment method",
-  "selectPaymentMethodPlaceholder": "Select payment method",
   "sellingAmount": "Enter selling price",
   "sellingPrice": "Selling Price",
   "sendClaim": "Claim sent successfully",
@@ -150,6 +150,5 @@
   "validSHANumber": "SHA number is valid, proceed with care",
   "visitTime": "Visit time",
   "visittype": "Visit Type",
-  "waiverForm": "Waiver form",
   "yes": "Yes"
 }