@kenyaemr/esm-billing-app 5.4.1-pre.2103 → 5.4.1-pre.2108

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"}},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"require-billing-modal","component":"requirePaymentModal"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","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","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-link-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-link-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-link-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-link-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-link-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-link-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-link-slot"},{"component":"claimsManagementSideNavGroup","name":"claims-management-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"claims-management","title":"Claims management Overview","slot":"case-management-slot"},"featureFlag":"healthInformationExchange"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"claims-management-dashboard-link-slot"},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"addCommodityForm","title":"Create Charge Item Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"bill-deposit-workspace","component":"billDepositWorkspace","title":"Bill Deposit Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"}],"version":"5.4.1-pre.2103"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"billableServicesHome","route":"billable-services"},{"component":"requirePaymentModal","routeRegex":"^patient/.+/chart","online":true,"offline":false}],"extensions":[{"component":"billingDashboardLink","name":"billing-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"billing","title":"billing","slot":"billing-dashboard-slot"}},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","slot":"patient-chart-dashboard-slot","meta":{"name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot","path":"insurance-benefits","columns":1,"columnSpan":1},"featureFlag":"healthInformationExchange"},{"component":"benefitsPackage","name":"benefits-package","slot":"patient-chart-benefits-dashboard-slot"},{"component":"root","name":"billing-dashboard-root","slot":"billing-dashboard-slot"},{"component":"benefitsEligibilyRequestForm","name":"benefits-eligibility-request-form"},{"component":"benefitsPreAuthForm","name":"benefits-pre-auth-form"},{"name":"billing-patient-summary","component":"billingPatientSummary","slot":"patient-chart-billing-dashboard-slot","order":10,"meta":{"columnSpan":4}},{"name":"billing-summary-dashboard-link","component":"billingSummaryDashboardLink","slot":"patient-chart-dashboard-slot","order":11,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-billing-dashboard-slot","path":"Billing","layoutMode":"anchored"}},{"name":"billing-check-in-form","slot":"extra-visit-attribute-slot","component":"billingCheckInForm"},{"name":"require-billing-modal","component":"requirePaymentModal"},{"name":"patient-banner-billing-tags","component":"visitAttributeTags","slot":"patient-banner-tags-slot","order":2},{"name":"initiate-payment-modal","component":"initiatePaymentDialog"},{"name":"delete-billableservice-modal","component":"deleteBillableServiceModal"},{"name":"refund-bill-modal","component":"refundBillModal"},{"name":"delete-bill-modal","component":"deleteBillModal"},{"name":"lab-order-billable-item","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","slot":"medication-info-slot"},{"name":"order-action-button","component":"orderActionButton","slots":["prescription-action-button-slot","imaging-orders-action","procedure-orders-action","tests-ordered-actions-slot"],"order":0},{"component":"billingOverviewLink","name":"billing-overview-link","order":0,"slot":"billing-dashboard-link-slot"},{"component":"paymentHistoryLink","name":"payment-history-link","slot":"billing-dashboard-link-slot"},{"component":"paymentPointsLink","name":"payment-points-link","slot":"billing-dashboard-link-slot"},{"component":"paymentModesLink","name":"payment-modes-link","slot":"billing-dashboard-link-slot"},{"component":"billManagerLink","name":"bill-manager-link","slot":"billing-dashboard-link-slot"},{"component":"chargeableItemsLink","name":"chargeable-items-link","slot":"billing-dashboard-link-slot"},{"component":"billableExemptionsLink","name":"billable-exemptions-link","slot":"billing-dashboard-link-slot"},{"component":"claimsManagementSideNavGroup","name":"claims-management-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"claims-management","title":"Claims management Overview","slot":"case-management-slot"},"featureFlag":"healthInformationExchange"},{"component":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","order":0,"slot":"claims-management-dashboard-link-slot"},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slot":"claims-management-dashboard-link-slot"},{"component":"claimsOverview","name":"claims-overview-dashboard-link","slot":"claims-management-overview-slot"},{"component":"waiveBillActionButton","name":"waive-bill-action-button","slot":"bill-actions-slot"},{"component":"deleteBillActionButton","name":"delete-bill-action-button","slot":"bill-actions-slot"},{"component":"refundLineItem","name":"refund-line-item","slot":"bill-actions-overflow-menu-slot"},{"name":"edit-line-item","component":"editLineItem","slot":"bill-actions-overflow-menu-slot"},{"name":"cancel-line-item","component":"cancelLineItem","slot":"bill-actions-overflow-menu-slot"}],"workspaces":[{"name":"create-bill-workspace","component":"createBillWorkspace","title":"Create Bill Workspace","type":"other-form"},{"name":"waive-bill-form","component":"waiveBillForm","title":"Waive Bill Form","type":"other-form"},{"name":"edit-bill-form","component":"editBillForm","title":"Edit Bill Form","type":"other-form"},{"name":"billable-service-form","component":"addServiceForm","title":"Create Charge Item Form","type":"other-form"},{"name":"commodity-form","component":"addCommodityForm","title":"Create Charge Item Form","type":"other-form"},{"name":"billing-form","component":"billingForm","title":"Billing Form","type":"other-form","width":"extra-wide"},{"name":"payment-mode-workspace","component":"paymentModeWorkspace","title":"Payment Mode Workspace","type":"other-form"},{"name":"cancel-bill-workspace","component":"cancelBillWorkspace","title":"Cancel Bill Workspace","type":"other-form"},{"name":"bill-deposit-workspace","component":"billDepositWorkspace","title":"Bill Deposit Workspace","type":"other-form"}],"modals":[{"name":"create-payment-point","component":"createPaymentPoint"},{"name":"clock-out-modal","component":"clockOut"},{"name":"bulk-import-billable-services-modal","component":"bulkImportBillableServicesModal"},{"name":"delete-payment-mode-modal","component":"deletePaymentModeModal"},{"name":"manage-claim-request-modal","component":"manageClaimRequestModal"},{"name":"paid-bill-receipt-print-preview-modal","component":"paidBillReceiptPrintPreviewModal"},{"name":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"}],"version":"5.4.1-pre.2108"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.4.1-pre.2103",
+  "version": "5.4.1-pre.2108",
   "description": "Billing app for KenyaEMR",
   "browser": "dist/kenyaemr-esm-billing-app.js",
   "main": "src/index.ts",

package/src/claims/claims-management/table/claim-table.component.tsx

@@ -92,6 +92,9 @@ const ClaimsTable: React.FC<TableProps> = ({ title, emptyStateText, emptyStateHe
   const layout = useLayoutType();
   const size = layout === 'tablet' ? 'lg' : 'md';
   const filteredClaimIds = filteredClaims.map((claim) => claim.responseUUID);
+  const responseUUIDs = filteredClaimIds
+    .map((claimId) => claims.find((c) => c.responseUUID === claimId)?.responseUUID)
+    .filter((uuid) => uuid);
 
   const getHeaders = (): Header[] => {
     let baseHeaders = [
@@ -208,7 +211,7 @@ const ClaimsTable: React.FC<TableProps> = ({ title, emptyStateText, emptyStateHe
           filters={filters}
           onFilterChanged={setFilters}
           statusOptions={status}
-          filteredClaimIds={filteredClaimIds}
+          filteredClaimIds={responseUUIDs}
         />
       </div>
       <DataTable rows={results} headers={headers} isSortable useZebraStyles>

package/src/claims/dashboard/table/claims-table.component.tsx

@@ -34,7 +34,6 @@ type ClaimsTableProps = {
 
 const ClaimsTable: React.FC<ClaimsTableProps> = ({ bill, isSelectable = true, isLoadingBill, onSelectItem }) => {
   const { t } = useTranslation();
-  const { lineItems } = bill;
   const layout = useLayoutType();
   const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
   const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
@@ -43,20 +42,33 @@ const ClaimsTable: React.FC<ClaimsTableProps> = ({ bill, isSelectable = true, is
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
-  const paidLineItems = useMemo(() => (lineItems || []).filter((item) => item.paymentStatus === 'PAID'), [lineItems]);
+  // Filter line items that are paid and paid through Insurance
+  const insurancePaidLineItems = useMemo(() => {
+    return (bill.lineItems || []).filter((lineItem) => {
+      // Check if payment status is PAID
+      const isPaid = lineItem.paymentStatus === 'PAID';
+
+      // Check if there's an Insurance payment for this line item
+      const hasInsurancePayment = bill.payments?.some(
+        (payment) => payment.billLineItem?.uuid === lineItem.uuid && payment.instanceType?.name === 'Insurance',
+      );
+
+      return isPaid && hasInsurancePayment;
+    });
+  }, [bill.lineItems, bill.payments]);
 
   const filteredLineItems = useMemo(() => {
     if (!debouncedSearchTerm) {
-      return paidLineItems;
+      return insurancePaidLineItems;
     }
 
     return fuzzy
-      .filter(debouncedSearchTerm, paidLineItems, {
-        extract: (lineItem: LineItem) => `${lineItem.item}`,
+      .filter(debouncedSearchTerm, insurancePaidLineItems, {
+        extract: (lineItem: LineItem) => `${lineItem.item || lineItem.billableService}`,
       })
       .sort((r1, r2) => r1.score - r2.score)
       .map((result) => result.original);
-  }, [debouncedSearchTerm, paidLineItems]);
+  }, [debouncedSearchTerm, insurancePaidLineItems]);
 
   const paginatedLineItems = useMemo(() => {
     const startIndex = (currentPage - 1) * pageSize;
@@ -69,11 +81,20 @@ const ClaimsTable: React.FC<ClaimsTableProps> = ({ bill, isSelectable = true, is
     { header: t('serialNo', 'Serial No'), key: 'serialno' },
     { header: t('billItem', 'Bill Item'), key: 'inventoryname' },
     { header: t('status', 'Status'), key: 'status' },
+    { header: t('paymentMethod', 'Payment Method'), key: 'paymentMethod' },
     { header: t('totalAmount', 'Total amount'), key: 'total' },
     { header: t('billCreationDate', 'Bill creation date'), key: 'dateofbillcreation' },
   ];
 
-  const processBillItem = (item) => (item?.item || item?.billableService)?.split(':')[1];
+  const processBillItem = (item) => {
+    const itemName = item?.item || item?.billableService;
+    return itemName?.split(':')[1]?.trim() || itemName;
+  };
+
+  const getPaymentMethod = (lineItemUuid: string) => {
+    const payment = bill.payments?.find((p) => p.billLineItem?.uuid === lineItemUuid);
+    return payment?.instanceType?.name || 'Unknown';
+  };
 
   const tableRows: Array<typeof DataTableRow> = useMemo(
     () =>
@@ -84,11 +105,12 @@ const ClaimsTable: React.FC<ClaimsTableProps> = ({ bill, isSelectable = true, is
           inventoryname: processBillItem(item),
           serialno: bill.receiptNumber,
           status: item.paymentStatus,
+          paymentMethod: getPaymentMethod(item.uuid),
           total: item.price * item.quantity,
           dateofbillcreation: formatDate(new Date(bill.dateCreated), { mode: 'standard' }),
         };
       }) ?? [],
-    [bill.dateCreated, bill.receiptNumber, paginatedLineItems],
+    [bill.dateCreated, bill.receiptNumber, bill.payments, paginatedLineItems],
   );
 
   if (isLoadingBill) {
@@ -126,10 +148,10 @@ const ClaimsTable: React.FC<ClaimsTableProps> = ({ bill, isSelectable = true, is
             className={styles.tableContainer}
             description={
               <span className={styles.tableDescription}>
-                <span>{t('selectitemstobeclaimed', 'Select items that are to be included in the claims')}</span>
+                <span>{t('insurancePaidItems', 'Items paid through Insurance')}</span>
               </span>
             }
-            title={t('lineItems', 'Line items')}>
+            title={t('claimableItems', 'Claimable Items')}>
             <div className={styles.toolbarWrapper}>
               <TableToolbar {...getToolbarProps()} className={styles.tableToolbar} size={responsiveSize}>
                 <TableToolbarContent className={styles.headerContainer}>
@@ -143,7 +165,7 @@ const ClaimsTable: React.FC<ClaimsTableProps> = ({ bill, isSelectable = true, is
                 </TableToolbarContent>
               </TableToolbar>
             </div>
-            <Table {...getTableProps()} aria-label="claim line items" className={styles.table}>
+            <Table {...getTableProps()} aria-label="insurance claim line items" className={styles.table}>
               <TableHead>
                 <TableRow>
                   {isSelectable ? <TableHeader /> : null}
@@ -184,14 +206,13 @@ const ClaimsTable: React.FC<ClaimsTableProps> = ({ bill, isSelectable = true, is
           <Layer>
             <Tile className={styles.filterEmptyStateTile}>
               <p className={styles.filterEmptyStateContent}>
-                {t('noMatchingItemsToDisplay', 'No matching items to display')}
+                {t('noInsurancePaidItems', 'No items paid through insurance found')}
               </p>
-              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
             </Tile>
           </Layer>
         </div>
       )}
-      {tableRows.length > pageSize && (
+      {filteredLineItems.length > pageSize && (
         <Pagination
           forwardText="Next page"
           backwardText="Previous page"

package/src/hooks/usePaymentSchema.tsx

@@ -23,6 +23,7 @@ export function usePaymentSchema(bill: MappedBill) {
         return amountDue >= 0 && value > 0;
       }, 'Amount paid should not be greater than amount due'),
       referenceCode: z.string(),
+      lineItemUuid: z.string().uuid().nonempty({ message: 'Line item selection is required' }),
     })
     .refine(
       (data) => {

package/src/invoice/invoice-table.component.tsx

@@ -151,7 +151,7 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
                       {...getRowProps({
                         row,
                       })}>
-                      {rows.length > 1 && isSelectable && (
+                      {isSelectable && (
                         <TableSelectRow
                           aria-label="Select row"
                           {...getSelectionProps({ row })}

package/src/invoice/payments/payment-form/payment-form.component.tsx

@@ -6,23 +6,33 @@ import { Button, Dropdown, NumberInputSkeleton, TextInput, NumberInput } from '@
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import styles from './payment-form.scss';
 import { usePaymentModes } from '../../../billing.resource';
-import { PaymentFormValue, PaymentMethod } from '../../../types';
+import { type LineItem, PaymentFormValue, PaymentMethod } from '../../../types';
+import { extractBillableName } from '../../../utils';
 
 type PaymentFormProps = {
   disablePayment: boolean;
   amountDue: number;
-  append: (obj: { method: PaymentMethod; amount: number; referenceCode: string }) => void;
+  append: (obj: { method: PaymentMethod; amount: number; referenceCode: string; lineItemUuid: string }) => void;
   fields: FieldArrayWithId<PaymentFormValue, 'payment', 'id'>[];
   remove: UseFieldArrayRemove;
+  selectedLineItems: Array<LineItem>;
 };
 
-const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue, append, remove, fields }) => {
+const PaymentForm: React.FC<PaymentFormProps> = ({
+  disablePayment,
+  amountDue,
+  append,
+  remove,
+  fields,
+  selectedLineItems,
+}) => {
   const { t } = useTranslation();
   const {
     control,
     formState: { errors },
     setFocus,
     getValues,
+    watch,
   } = useFormContext<PaymentFormValue>();
   const { paymentModes, isLoading, error } = usePaymentModes();
 
@@ -31,9 +41,26 @@ const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue, ap
     const attributes = formValues?.payment?.[index]?.method?.attributeTypes ?? [];
     return attributes.some((attribute) => attribute.required) || attributes?.length > 0;
   };
+  const paymentValues = watch('payment');
 
+  const getUsedItemUuids = (currentIndex: number) => {
+    return paymentValues
+      .map((payment, index) => (index !== currentIndex ? payment?.lineItemUuid : null))
+      .filter(Boolean);
+  };
+  const getAvailableLineItems = (currentIndex: number) => {
+    const usedUuids = getUsedItemUuids(currentIndex);
+    return selectedLineItems.filter((item) => item.paymentStatus === 'PENDING' && !usedUuids.includes(item.uuid));
+  };
   const handleAppendPaymentMode = useCallback(() => {
-    append({ method: null, amount: null, referenceCode: '' });
+    const availableItems = getAvailableLineItems(fields.length);
+    const initialItemUuid = availableItems.length === 1 ? availableItems[0].uuid : '';
+    append({
+      method: null,
+      amount: null,
+      referenceCode: '',
+      lineItemUuid: initialItemUuid,
+    });
     setFocus(`payment.${fields.length}.method`);
   }, [append, fields.length, setFocus]);
 
@@ -53,67 +80,91 @@ const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment, amountDue, ap
 
   return (
     <div className={styles.container}>
-      {fields.map((field, index) => (
-        <div key={field.id} className={styles.paymentMethodContainer}>
-          <Controller
-            control={control}
-            name={`payment.${index}.method`}
-            render={({ field }) => (
-              <Dropdown
-                {...field}
-                id="paymentMethod"
-                onChange={({ selectedItem }) => {
-                  setFocus(`payment.${index}.amount`);
-                  field.onChange(selectedItem);
-                }}
-                titleText={t('paymentMethod', 'Payment method')}
-                label={t('selectPaymentMethod', 'Select payment method')}
-                items={paymentModes}
-                itemToString={(item) => (item ? item.name : '')}
-                invalid={!!errors?.payment?.[index]?.method}
-                invalidText={errors?.payment?.[index]?.method?.message}
-              />
-            )}
-          />
-          <Controller
-            control={control}
-            name={`payment.${index}.amount`}
-            render={({ field }) => (
-              <NumberInput
-                {...field}
-                id="paymentAmount"
-                onChange={(e) => field.onChange(Number(e.target.value))}
-                invalid={!!errors?.payment?.[index]?.amount}
-                invalidText={errors?.payment?.[index]?.amount?.message}
-                label={t('amount', 'Amount')}
-                placeholder={t('enterAmount', 'Enter amount')}
-              />
-            )}
-          />
-          {shouldShowReferenceCode(index) && (
+      {fields.map((field, index) => {
+        const availableLineItems = getAvailableLineItems(index);
+        return (
+          <div key={field.id} className={styles.paymentMethodContainer}>
+            <Controller
+              control={control}
+              name={`payment.${index}.lineItemUuid`}
+              render={({ field }) => (
+                <Dropdown
+                  {...field}
+                  id="paymentLineItem"
+                  onChange={({ selectedItem }) => {
+                    field.onChange(selectedItem?.uuid);
+                    setFocus(`payment.${index}.method`);
+                  }}
+                  titleText={t('selectLineItemToPay', 'Select line item to pay')}
+                  label={t('selectLineItemToPay', 'Select line item to pay')}
+                  items={availableLineItems}
+                  itemToString={(item) => extractBillableName(item)}
+                  invalid={!!errors?.payment?.[index]?.lineItemUuid}
+                  invalidText={errors?.payment?.[index]?.lineItemUuid?.message}
+                  className={styles.lineItemDropdown}
+                />
+              )}
+            />
             <Controller
-              name={`payment.${index}.referenceCode`}
               control={control}
+              name={`payment.${index}.method`}
               render={({ field }) => (
-                <TextInput
+                <Dropdown
                   {...field}
-                  id="paymentReferenceCode"
-                  labelText={t('referenceNumber', 'Reference number')}
-                  placeholder={t('enterReferenceNumber', 'Enter ref. number')}
-                  type="text"
-                  invalid={!!errors?.payment?.[index]?.referenceCode}
-                  invalidText={errors?.payment?.[index]?.referenceCode?.message}
+                  id="paymentMethod"
+                  onChange={({ selectedItem }) => {
+                    setFocus(`payment.${index}.amount`);
+                    field.onChange(selectedItem);
+                  }}
+                  titleText={t('paymentMethod', 'Payment method')}
+                  label={t('selectPaymentMethod', 'Select payment method')}
+                  items={paymentModes}
+                  itemToString={(item) => (item ? item.name : '')}
+                  invalid={!!errors?.payment?.[index]?.method}
+                  invalidText={errors?.payment?.[index]?.method?.message}
                 />
               )}
             />
-          )}
-          <div className={styles.removeButtonContainer}>
-            <TrashCan onClick={() => handleRemovePaymentMode(index)} className={styles.removeButton} size={20} />
+            <Controller
+              control={control}
+              name={`payment.${index}.amount`}
+              render={({ field }) => (
+                <NumberInput
+                  {...field}
+                  id="paymentAmount"
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                  invalid={!!errors?.payment?.[index]?.amount}
+                  invalidText={errors?.payment?.[index]?.amount?.message}
+                  label={t('amount', 'Amount')}
+                  placeholder={t('enterAmount', 'Enter amount')}
+                />
+              )}
+            />
+            {shouldShowReferenceCode(index) && (
+              <Controller
+                name={`payment.${index}.referenceCode`}
+                control={control}
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    id="paymentReferenceCode"
+                    labelText={t('referenceNumber', 'Reference number')}
+                    placeholder={t('enterReferenceNumber', 'Enter ref. number')}
+                    type="text"
+                    invalid={!!errors?.payment?.[index]?.referenceCode}
+                    invalidText={errors?.payment?.[index]?.referenceCode?.message}
+                  />
+                )}
+              />
+            )}
+            <div className={styles.removeButtonContainer}>
+              <TrashCan onClick={() => handleRemovePaymentMode(index)} className={styles.removeButton} size={20} />
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
       <Button
-        disabled={disablePayment}
+        disabled={disablePayment || !selectedLineItems.length}
         size="md"
         onClick={handleAppendPaymentMode}
         className={styles.paymentButtons}

package/src/invoice/payments/payment-form/payment-form.scss

@@ -19,9 +19,9 @@
 
 .paymentMethodContainer {
   display: grid;
-  grid-template-columns: repeat(4, minmax(auto, 1fr));
+  grid-template-columns: repeat(5, minmax(auto, 1fr));
   align-items: flex-start;
-  column-gap: 1rem;
+  column-gap: layout.$spacing-02;
   margin: 0.625rem 0;
   width: 100%;
 }
@@ -52,3 +52,6 @@
 .removeButton {
   color: colors.$red-60;
 }
+.lineItemDropdown {
+  min-width: 10rem;
+}

package/src/invoice/payments/payments.component.tsx

@@ -67,7 +67,6 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
       globalActiveSheet,
     );
     remove();
-
     processBillPayment(paymentPayload, bill.uuid).then(
       (resp) => {
         showSnackbar({
@@ -142,7 +141,12 @@ const Payments: React.FC<PaymentProps> = ({ bill, selectedLineItems }) => {
                 className={styles.paymentError}
               />
             )}
-            <PaymentForm {...formArrayMethods} disablePayment={amountDue <= 0} amountDue={amountDue} />
+            <PaymentForm
+              {...formArrayMethods}
+              selectedLineItems={selectedLineItems}
+              disablePayment={amountDue <= 0}
+              amountDue={amountDue}
+            />
           </div>
         </div>
         <div className={styles.divider} />

package/src/invoice/payments/payments.test.tsx

@@ -6,6 +6,7 @@ import { mockBill, mockedActiveSheet, mockLineItems, mockPaymentModes } from '..
 import { processBillPayment, usePaymentModes } from '../../billing.resource';
 import { useClockInStatus } from '../../payment-points/use-clock-in-status';
 import Payments from './payments.component';
+
 const mockProcessBillPayment = processBillPayment as jest.MockedFunction<typeof processBillPayment>;
 const mockUsePaymentModes = usePaymentModes as jest.MockedFunction<typeof usePaymentModes>;
 const mockShowSnackbar = showSnackbar as jest.MockedFunction<typeof showSnackbar>;
@@ -31,6 +32,7 @@ describe('Payment', () => {
         },
       },
     };
+
     mockProcessBillPayment.mockRejectedValueOnce(mockFieldErrorResponse);
     mockUsePaymentModes.mockReturnValue({
       paymentModes: mockPaymentModes,
@@ -49,10 +51,19 @@ describe('Payment', () => {
     });
 
     render(<Payments bill={mockBill as any} selectedLineItems={mockLineItems} />);
+
     const addPaymentMethod = screen.getByRole('button', { name: /Add payment option/i });
     await user.click(addPaymentMethod);
-    await user.click(screen.getByRole('combobox', { name: /Payment method/i }));
-    const cashOption = screen.getByRole('option', { name: /Cash/i });
+
+    const lineItemDropdown = await screen.findByRole('combobox', { name: /Select line item to pay/i });
+    await user.click(lineItemDropdown);
+
+    const lineItemOptions = await screen.findAllByRole('option');
+    await user.click(lineItemOptions[0]);
+
+    const paymentMethodDropdown = await screen.findByRole('combobox', { name: /Payment method/i });
+    await user.click(paymentMethodDropdown);
+    const cashOption = await screen.findByRole('option', { name: /Cash/i });
     await user.click(cashOption);
 
     const amountInput = screen.getByRole('spinbutton', { name: /Amount/i });
@@ -71,6 +82,8 @@ describe('Payment', () => {
             billableService: 'c15d25b9-12bb-441d-9241-cae541dd4575',
             display: 'BillLineItem',
             item: 'c15d25b9-12bb-441d-9241-cae541dd4575',
+            itemOrServiceConceptUuid: 'c42525b9-12bb-441d-9241-cae541dd4575',
+            serviceTypeUuid: '915d25b9-12bb-441d-9241-cae541dd4575',
             lineItemOrder: 0,
             order: null,
             paymentStatus: 'PAID',
@@ -87,6 +100,8 @@ describe('Payment', () => {
             billableService: '04be5832-5440-44d0-83d2-5c0dfd0ac7de',
             display: 'BillLineItem',
             item: '04be5832-5440-44d0-83d2-5c0dfd0ac7de',
+            itemOrServiceConceptUuid: 'c42525b9-12bb-441d-9241-cae541dd4575',
+            serviceTypeUuid: '915d25b9-12bb-441d-9241-cae541dd4575',
             lineItemOrder: 1,
             order: null,
             paymentStatus: 'PAID',
@@ -103,6 +118,8 @@ describe('Payment', () => {
             billableService: '3f5d0684-a280-477e-a67b-2a956a1f6dca',
             display: 'BillLineItem',
             item: '3f5d0684-a280-477e-a67b-2a956a1f6dca',
+            itemOrServiceConceptUuid: 'c42525b9-12bb-441d-9241-cae541dd4575',
+            serviceTypeUuid: '915d25b9-12bb-441d-9241-cae541dd4575',
             lineItemOrder: 2,
             order: null,
             paymentStatus: 'PAID',
@@ -133,7 +150,13 @@ describe('Payment', () => {
         ],
         patient: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
         payments: [
-          { amount: 100, amountTendered: 100, attributes: [], instanceType: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74' },
+          {
+            amount: 100,
+            amountTendered: 100,
+            attributes: [],
+            instanceType: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74',
+            billLineItem: '314c25fd-2c90-4a7f-9f98-c99cd3f153e8',
+          },
         ],
         status: 'PENDING',
       },
@@ -158,18 +181,27 @@ describe('Payment', () => {
       error: null,
       mutate: jest.fn(),
     });
+
     render(<Payments bill={mockBill as any} selectedLineItems={mockLineItems} />);
+
     const addPaymentMethod = screen.getByRole('button', { name: /Add payment option/i });
     await user.click(addPaymentMethod);
 
-    // Check if the payment method field is focused
-    expect(screen.getByRole('combobox', { name: /Payment method/i })).toHaveFocus();
-    await user.click(screen.getByRole('combobox', { name: /Payment method/i }));
-    const cashOption = screen.getByRole('option', { name: /Cash/i });
+    const lineItemDropdown = await screen.findByRole('combobox', { name: /Select line item to pay/i });
+    expect(lineItemDropdown).toHaveFocus();
+
+    await user.click(lineItemDropdown);
+    const lineItemOptions = await screen.findAllByRole('option');
+    await user.click(lineItemOptions[0]);
+
+    const paymentMethodField = await screen.findByRole('combobox', { name: /Payment method/i });
+    expect(paymentMethodField).toHaveFocus();
+
+    await user.click(paymentMethodField);
+    const cashOption = await screen.findByRole('option', { name: /Cash/i });
     await user.click(cashOption);
-    // Check if the amount field is focused
-    expect(screen.getByRole('spinbutton', { name: /Amount/i })).toHaveFocus();
+
     const amountInput = screen.getByRole('spinbutton', { name: /Amount/i });
-    await user.type(amountInput, '100');
+    expect(amountInput).toHaveFocus();
   });
 });

package/src/invoice/payments/utils.ts

@@ -126,6 +126,7 @@ export const createPaymentPayload = (
       value: attribute.value,
     })),
     instanceType: payment.instanceType.uuid,
+    billLineItem: payment.billLineItem?.uuid,
   }));
 
   // Transform new payments
@@ -137,6 +138,7 @@ export const createPaymentPayload = (
       value: formValue.referenceCode,
     })),
     instanceType: formValue.method?.uuid,
+    billLineItem: formValue.lineItemUuid,
   }));
 
   // Combine and calculate payments

package/src/types/index.ts

@@ -285,12 +285,35 @@ export interface Payment {
   attributes: Attribute[];
   amount: number;
   amountTendered: number;
+  billLineItem: BillLineItem;
   dateCreated: number;
   voided: boolean;
   resourceVersion: string;
 }
+export interface BillLineItem {
+  uuid: string;
+  display: string;
+  voided: boolean;
+  voidReason: any;
+  item: string;
+  billableService: string;
+  quantity: number;
+  price: number;
+  priceName: string;
+  priceUuid: string;
+  lineItemOrder: number;
+  paymentStatus: string;
+  itemOrServiceConceptUuid: string;
+  serviceTypeUuid: string;
+  resourceVersion: string;
+}
 
-export type FormPayment = { method: PaymentMethod; amount: string | number; referenceCode?: number | string };
+export type FormPayment = {
+  method: PaymentMethod;
+  amount: string | number;
+  referenceCode?: number | string;
+  lineItemUuid: string;
+};
 
 export type PaymentFormValue = {
   payment: Array<FormPayment>;

package/src/utils.ts

@@ -166,3 +166,9 @@ export const computeWaivedAmount = (bill: MappedBill) => {
     .filter((payment) => payment.instanceType.name.toLowerCase() === 'waiver')
     .reduce((curr: number, prev) => curr + Number(prev.amountTendered), 0);
 };
+
+export const extractBillableName = (billableService: string | { billableService: string }) => {
+  const parts =
+    typeof billableService === 'string' ? billableService.split(':') : billableService.billableService.split(':');
+  return parts.length > 1 ? parts[1] : '';
+};