@kenyaemr/esm-billing-app 5.4.1-pre.1935 → 5.4.1-pre.1941

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":"billing-test-order-action","component":"testOrderAction","slot":"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":"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"}],"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":"retry-claim-request-modal","component":"retryClaimRequestModal"},{"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.1935"}
+{"$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","slot":"prescription-action-button-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":"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"}],"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":"retry-claim-request-modal","component":"retryClaimRequestModal"},{"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.1941"}

package/package.json

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

package/src/benefits-package/benefits-package.resources.tsx

@@ -16,7 +16,7 @@ export const preauthSchema = z.object({
   providerUuid: z.string().uuid(),
   facilityUuid: z.string().uuid(),
   diagnosisUuids: z.array(z.string()),
-  packageUUid: z.string(),
+  packages: z.array(z.string()).nonempty('Require atleast 1 package'),
   interventions: z.array(z.string()).nonempty('Require atleast 1 intervention'),
 });
 

package/src/benefits-package/forms/benefit-pre-auth-form.workspace.tsx

@@ -5,16 +5,15 @@ import {
   DropdownSkeleton,
   Form,
   FormLabel,
-  InlineNotification,
   Layer,
   Loading,
   MultiSelect,
   Stack,
-  Tile,
 } from '@carbon/react';
 import { DocumentAttachment } from '@carbon/react/icons';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DefaultWorkspaceProps, showSnackbar, useSession } from '@openmrs/esm-framework';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import React, { useEffect, useRef, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -22,14 +21,12 @@ import { z } from 'zod';
 import { useVisit } from '../../claims/dashboard/form/claims-form.resource';
 import { MAX_ALLOWED_FILE_SIZE } from '../../constants';
 import { useSystemSetting } from '../../hooks/getMflCode';
-import usePackages from '../../hooks/usePackages';
 import usePatientDiagnosis from '../../hooks/usePatientDiagnosis';
 import useProvider from '../../hooks/useProvider';
 import { PatientBenefit } from '../../types';
 import { preAuthenticateBenefit, preauthSchema } from '../benefits-package.resources';
 import styles from './benefits-pre-auth-form.scss';
-import PackageInterventions from './package-interventions.component';
-import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import SHABenefitPackangesAndInterventions from './packages-and-interventions-form.component';
 
 type BenefitsPreAuth = z.infer<typeof preauthSchema>;
 
@@ -41,7 +38,7 @@ interface BenefitPreAuthFormProps extends DefaultWorkspaceProps {
 
 const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace, patientUuid }) => {
   const { t } = useTranslation();
-  const { visits: recentVisit, isLoading } = useVisit(patientUuid);
+  const { visits: recentVisit, isLoading, error: visitError } = useVisit(patientUuid);
   const { isLoading: diagnosesLoading, diagnoses } = usePatientDiagnosis(patientUuid);
   const inputFileRef = useRef<HTMLInputElement>();
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
@@ -53,7 +50,6 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
     sessionLocation: { uuid: facilityUuid, display: facilityName },
   } = useSession();
   const { providerLoading: providerLoading, provider } = useProvider(providerUuid);
-  const { isLoading: packagesLoading, error: packageError, packages } = usePackages();
 
   const form = useForm<BenefitsPreAuth>({
     defaultValues: {
@@ -62,6 +58,7 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
       facilityUuid,
       diagnosisUuids: [],
       interventions: [],
+      packages: [],
     },
     resolver: zodResolver(preauthSchema),
   });
@@ -104,9 +101,7 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
     }
   };
 
-  const selectedPackageObservable = form.watch('packageUUid');
-
-  if (packagesLoading || diagnosesLoading || isLoading || providerLoading) {
+  if (diagnosesLoading || isLoading || providerLoading) {
     return (
       <Layer className={styles.loading}>
         <Loading withOverlay={false} small />
@@ -114,10 +109,10 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
     );
   }
 
-  if (packageError) {
+  if (visitError) {
     return (
       <Layer className={styles.error}>
-        <ErrorState error={packageError} headerTitle={t('errorMessage', 'Error')} />
+        <ErrorState error={visitError} headerTitle={t('errorMessage', 'Error')} />
       </Layer>
     );
   }
@@ -206,46 +201,7 @@ const BenefitPreAuthForm: React.FC<BenefitPreAuthFormProps> = ({ closeWorkspace,
               )}
             />
           </Column>
-          <Column>
-            <Controller
-              control={form.control}
-              name="packageUUid"
-              render={({ field }) => (
-                <>
-                  {packageError ? (
-                    <InlineNotification
-                      kind="error"
-                      subtitle={t('errorFetchingPackages', 'Error fetching packeges')}
-                      lowContrast
-                    />
-                  ) : (
-                    <Dropdown
-                      ref={field.ref}
-                      invalid={form.formState.errors[field.name]?.message}
-                      invalidText={form.formState.errors[field.name]?.message}
-                      id="package"
-                      titleText={t('package', 'Package')}
-                      onChange={(e) => {
-                        field.onChange(e.selectedItem);
-                      }}
-                      initialSelectedItem={field.value}
-                      label="Choose package"
-                      items={packages.map((r) => r.uuid)}
-                      itemToString={(item) => packages.find((r) => r.uuid === item)?.packageName ?? ''}
-                    />
-                  )}
-                </>
-              )}
-            />
-          </Column>
-          {selectedPackageObservable && (
-            <Column>
-              <PackageInterventions
-                category={packages.find((package_) => package_.uuid === selectedPackageObservable)?.packageCode ?? ''}
-                patientUuid={patientUuid}
-              />
-            </Column>
-          )}
+          <SHABenefitPackangesAndInterventions patientUuid={patientUuid} />
           <Column>
             <Controller
               control={form.control}

package/src/benefits-package/forms/{package-interventions.component.tsx → interventions-form.component.tsx}

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { InlineLoading, InlineNotification, MultiSelect } from '@carbon/react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -10,19 +10,35 @@ import { usePatient } from '@openmrs/esm-framework';
 type EligibilityRequest = z.infer<typeof eligibilityRequestShema>;
 
 type PackageInterventionsProps = {
-  category: string;
+  categories: Array<string>;
   patientUuid: string;
 };
-const PackageInterventions: React.FC<PackageInterventionsProps> = ({ category, patientUuid }) => {
+const PackageInterventions: React.FC<PackageInterventionsProps> = ({ categories, patientUuid }) => {
   const { error: patientError, isLoading: isPatientLoading, patient } = usePatient(patientUuid);
   const filters: InterventionsFilter = {
-    package_code: category,
+    package_code: categories.join(','),
     applicable_gender: patient?.gender === 'male' ? 'MALE' : 'FEMALE',
   };
-  const { error, interventions, isLoading } = useInterventions(filters);
+  const { error, interventions, isLoading, allInterventions } = useInterventions(filters);
 
-  const form = useFormContext<EligibilityRequest>();
+  const form = useFormContext<{ packages: Array<string>; interventions: Array<string> }>();
   const { t } = useTranslation();
+  const selectedInterventionsObservable = form.watch('interventions');
+
+  const interventions_ = useMemo(() => {
+    const additionalInterventions = selectedInterventionsObservable.reduce((prev, curr) => {
+      const interventionContainedInOptions = interventions.some((i) => i.interventionCode === curr);
+      if (!interventionContainedInOptions) {
+        const intervention = allInterventions.find((i) => i.interventionCode === curr);
+        if (intervention) {
+          prev.push(intervention);
+        }
+      }
+      return prev;
+    }, [] as typeof allInterventions);
+
+    return [...interventions, ...additionalInterventions];
+  }, [allInterventions, interventions, selectedInterventionsObservable]);
 
   if (isLoading || isPatientLoading) {
     return (
@@ -47,10 +63,6 @@ const PackageInterventions: React.FC<PackageInterventionsProps> = ({ category, p
     );
   }
 
-  if (interventions.length === 0) {
-    return null;
-  }
-
   return (
     <Controller
       control={form.control}
@@ -65,10 +77,10 @@ const PackageInterventions: React.FC<PackageInterventionsProps> = ({ category, p
           onChange={(e) => {
             field.onChange(e.selectedItems);
           }}
-          initialSelectedItems={field.value}
+          selectedItems={field.value}
           label={t('chooseInterventions', 'Choose interventions')}
-          items={interventions.map((r) => r.interventionCode)}
-          itemToString={(item) => interventions.find((r) => r.interventionCode === item)?.interventionName ?? ''}
+          items={interventions_.map((r) => r.interventionCode)}
+          itemToString={(item) => interventions_.find((r) => r.interventionCode === item)?.interventionName ?? ''}
         />
       )}
     />

package/src/benefits-package/forms/packages-and-interventions-form.component.tsx

@@ -0,0 +1,72 @@
+import { Column, InlineLoading, InlineNotification, MultiSelect } from '@carbon/react';
+import React, { useEffect } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import PackageInterventions from './interventions-form.component';
+import usePackages from '../../hooks/usePackages';
+
+type Props = {
+  patientUuid: string;
+};
+
+const SHABenefitPackangesAndInterventions: React.FC<Props> = ({ patientUuid }) => {
+  const form = useFormContext<{ packages: Array<string>; interventions: Array<string> }>();
+  const { isLoading: packagesLoading, error: packageError, packages } = usePackages();
+  const { t } = useTranslation();
+  const selectedPackageObservable = form.watch('packages');
+
+  if (packagesLoading) {
+    return (
+      <InlineLoading description={t('loading', 'Loading')} iconDescription={t('loading', 'Loading data') + '...'} />
+    );
+  }
+
+  return (
+    <>
+      <Column>
+        <Controller
+          control={form.control}
+          name="packages"
+          render={({ field }) => (
+            <>
+              {packageError ? (
+                <InlineNotification
+                  kind="error"
+                  subtitle={t('errorFetchingPackages', 'Error fetching packeges')}
+                  lowContrast
+                />
+              ) : (
+                <MultiSelect
+                  ref={field.ref}
+                  invalid={form.formState.errors[field.name]?.message}
+                  invalidText={form.formState.errors[field.name]?.message}
+                  id="packages"
+                  titleText={t('package', 'Packages')}
+                  onChange={(e) => {
+                    field.onChange(e.selectedItems);
+                  }}
+                  selectedItems={field.value}
+                  label={t('choosePackage', 'Choose package')}
+                  items={packages.map((r) => r.uuid)}
+                  itemToString={(item) => packages.find((r) => r.uuid === item)?.packageName ?? ''}
+                />
+              )}
+            </>
+          )}
+        />
+      </Column>
+      <Column>
+        <PackageInterventions
+          categories={
+            packages
+              .filter((packages_) => selectedPackageObservable.includes(packages_.uuid))
+              ?.map((p) => p.packageCode) ?? []
+          }
+          patientUuid={patientUuid}
+        />
+      </Column>
+    </>
+  );
+};
+
+export default SHABenefitPackangesAndInterventions;

package/src/billable-services/billiable-item/order-actions/components/base-order-button.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { InlineLoading, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+export type BaseOrderButtonProps = {
+  isDisabled: boolean;
+  isLoading: boolean;
+  buttonText: string;
+  onClick: () => void;
+  kind?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'tertiary';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  Icon?;
+};
+
+export const BaseOrderButton: React.FC<BaseOrderButtonProps> = ({
+  isDisabled,
+  isLoading,
+  buttonText,
+  onClick,
+  kind = 'primary',
+  size = 'md',
+  className = '',
+  Icon,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Button
+      kind={isLoading ? 'ghost' : kind}
+      renderIcon={!isLoading ? Icon : undefined}
+      className={className}
+      size={size}
+      disabled={isLoading || isDisabled}
+      onClick={onClick}>
+      {isLoading ? (
+        <InlineLoading description={t('verifyingBillStatus', 'Verifying bill status...')} status="active" />
+      ) : (
+        buttonText
+      )}
+    </Button>
+  );
+};

package/src/billable-services/billiable-item/order-actions/components/lab-order-button.component.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { showModal } from '@openmrs/esm-framework';
+import { Order } from '@openmrs/esm-patient-common-lib';
+import { BaseOrderButton } from './base-order-button.component';
+import { useLabOrderAction } from '../hooks/useLabOrderAction';
+import { useModalHandler } from '../hooks/useModalHandler';
+import styles from '../styles/order-action.scss';
+
+export interface LabOrderButtonProps {
+  order?: Order;
+  modalName?: string;
+  additionalProps?: Record<string, unknown>;
+  actionText?: string;
+}
+
+export const LabOrderButton: React.FC<LabOrderButtonProps> = ({
+  order,
+  modalName = 'pickup-lab-request-modal',
+  additionalProps,
+  actionText,
+}) => {
+  const { isLoading, isDisabled, buttonText: defaultButtonText, isInProgress } = useLabOrderAction(order);
+
+  const { handleModalClose } = useModalHandler(additionalProps?.mutateUrl as string);
+  const buttonText = actionText ?? defaultButtonText;
+
+  const launchModal = useCallback(() => {
+    const dispose = showModal(modalName, {
+      closeModal: () => {
+        handleModalClose();
+        dispose();
+      },
+      order,
+      ...(additionalProps && { additionalProps }),
+    });
+  }, [modalName, order, additionalProps, handleModalClose]);
+
+  if (isInProgress) {
+    return null;
+  }
+
+  return (
+    <BaseOrderButton
+      isLoading={isLoading}
+      isDisabled={isDisabled}
+      buttonText={buttonText}
+      onClick={launchModal}
+      className={styles.actionButton}
+    />
+  );
+};

package/src/billable-services/billiable-item/order-actions/components/medication-order-button.component.tsx

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import { Edit } from '@carbon/react/icons';
+import { showModal, launchWorkspace } from '@openmrs/esm-framework';
+import { BaseOrderButton } from './base-order-button.component';
+import { useMedicationOrderAction, useOrderByUuid } from '../hooks/useMedicationOrderAction';
+import { launchPrescriptionEditWorkspace, useModalHandler } from '../hooks/useModalHandler';
+import { useTranslation } from 'react-i18next';
+export interface MedicationOrderButtonProps {
+  medicationRequestBundle?: {
+    request: fhir.MedicationRequest;
+  };
+  modalName?: string;
+  additionalProps?: Record<string, unknown>;
+  actionText?: string;
+  closeable?: boolean;
+}
+
+export const MedicationOrderButton: React.FC<MedicationOrderButtonProps> = ({
+  medicationRequestBundle,
+  modalName,
+  additionalProps,
+  actionText,
+  closeable = true,
+}) => {
+  const { t } = useTranslation();
+  const {
+    isLoading: isMedicationOrderLoading,
+    isDisabled,
+    buttonText: defaultButtonText,
+    shouldShowBillModal,
+    dispenseFormProps,
+    patientUuid,
+    shouldAllowModify,
+  } = useMedicationOrderAction(medicationRequestBundle);
+  const { data: order, isLoading: isOrderLoading } = useOrderByUuid(medicationRequestBundle?.request?.id);
+  const isLoading = isMedicationOrderLoading && isOrderLoading;
+
+  const { handleModalClose } = useModalHandler(additionalProps?.mutateUrl as string);
+  const buttonText = actionText ?? defaultButtonText;
+
+  const launchModal = useCallback(() => {
+    if (shouldShowBillModal) {
+      const disposeBill = showModal(modalName ?? 'create-bill-item-modal', {
+        closeModal: () => {
+          handleModalClose();
+          disposeBill();
+        },
+        medicationRequestBundle,
+      });
+      return;
+    }
+
+    if (dispenseFormProps) {
+      launchWorkspace('dispense-workspace', dispenseFormProps);
+    }
+  }, [modalName, shouldShowBillModal, handleModalClose, medicationRequestBundle, dispenseFormProps]);
+
+  if (!closeable) {
+    return null;
+  }
+
+  return (
+    <div>
+      {shouldAllowModify && (
+        <BaseOrderButton
+          size="lg"
+          kind="tertiary"
+          Icon={Edit}
+          isLoading={isLoading}
+          isDisabled={false}
+          buttonText={t('modify', 'Modify')}
+          onClick={() => launchPrescriptionEditWorkspace(order, patientUuid)}
+        />
+      )}
+      <BaseOrderButton
+        size="lg"
+        isLoading={isLoading}
+        isDisabled={isDisabled}
+        buttonText={buttonText}
+        onClick={launchModal}
+      />
+    </div>
+  );
+};

package/src/billable-services/billiable-item/order-actions/components/order-action-button.component.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { LabOrderButton } from './lab-order-button.component';
+import { MedicationOrderButton } from './medication-order-button.component';
+
+const OrderActionButton: React.FC<Record<string, any>> = (props) => {
+  if (Object.hasOwn(props, 'medicationRequestBundle')) {
+    const { medicationRequestBundle, modalName, additionalProps, actionText, closeable } = props;
+    return (
+      <MedicationOrderButton
+        medicationRequestBundle={medicationRequestBundle}
+        modalName={modalName}
+        additionalProps={additionalProps}
+        actionText={actionText}
+        closeable={closeable}
+      />
+    );
+  }
+
+  if (props.orderType === 'lab') {
+    const { order, modalName, additionalProps, actionText } = props;
+    return (
+      <LabOrderButton order={order} modalName={modalName} additionalProps={additionalProps} actionText={actionText} />
+    );
+  }
+
+  return null;
+};
+
+export default OrderActionButton;

package/src/billable-services/billiable-item/order-actions/hooks/useBillStatus.ts

@@ -0,0 +1,12 @@
+import { useOrderBill, useTestOrderBillStatus } from '../../test-order/test-order-action.resource';
+
+export function useBillStatus(orderUuid?: string, patientUuid?: string) {
+  const { isLoading, hasPendingPayment } = useTestOrderBillStatus(orderUuid, patientUuid);
+  const { itemHasBill } = useOrderBill(patientUuid, orderUuid);
+
+  return {
+    isLoading,
+    hasPendingPayment,
+    itemHasBill,
+  };
+}

package/src/billable-services/billiable-item/order-actions/hooks/useLabOrderAction.ts

@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import { Order } from '@openmrs/esm-patient-common-lib';
+import { useBillStatus } from './useBillStatus';
+
+export enum FulfillerStatus {
+  IN_PROGRESS = 'IN_PROGRESS',
+}
+
+export function useLabOrderAction(order?: Order) {
+  const { t } = useTranslation();
+  const orderUuid = order?.uuid;
+  const patientUuid = order?.patient?.uuid;
+
+  const { isLoading, hasPendingPayment } = useBillStatus(orderUuid, patientUuid);
+
+  const isInProgress = order?.fulfillerStatus === FulfillerStatus.IN_PROGRESS;
+  const buttonText = hasPendingPayment ? t('unsettledBill', 'Unsettled bill') : t('pickLabRequest', 'Pick Lab Request');
+
+  return {
+    isLoading,
+    isDisabled: hasPendingPayment,
+    buttonText,
+    isInProgress,
+    orderUuid,
+    patientUuid,
+  };
+}