@kenyaemr/esm-billing-app 5.4.1-pre.1998 → 5.4.1-pre.2000

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":"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.1998"}
+{"$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":"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.2000"}

package/package.json

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

package/src/config-schema.ts

@@ -25,6 +25,7 @@ export interface BillingConfig {
   patientBillsUrl: string;
   nationalIdUUID: string;
   isPDSLFacility: boolean;
+  mobileMoneyPaymentModeUUID: string;
   concepts: {
     emergencyPriorityConceptUuid: string;
   };
@@ -41,6 +42,11 @@ export const configSchema: ConfigSchema = {
     _description: 'A flag for PDSL facilities',
     _default: false,
   },
+  mobileMoneyPaymentModeUUID: {
+    _type: Type.UUID,
+    _description: 'Mobile money payment method uuid',
+    _default: '28989582-e8c3-46b0-96d0-c249cb06d5c6',
+  },
   shaIdentificationNumberUUID: {
     _type: Type.String,
     _description: 'Social Health Authority Identification Number',

package/src/invoice/invoice.component.tsx

@@ -82,6 +82,7 @@ const Invoice: React.FC = () => {
     const dispose = showModal('initiate-payment-modal', {
       closeModal: () => dispose(),
       bill: bill,
+      selectedLineItems,
     });
   };
 

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

@@ -1,12 +1,16 @@
 import {
   Button,
+  ButtonSet,
+  ContentSwitcher,
   Form,
   InlineNotification,
   Layer,
   Loading,
   ModalBody,
+  ModalFooter,
   ModalHeader,
   NumberInputSkeleton,
+  Switch,
   TextInput,
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -20,7 +24,8 @@ import { useSystemSetting } from '../../../hooks/getMflCode';
 import { usePatientAttributes } from '../../../hooks/usePatientAttributes';
 import { useRequestStatus } from '../../../hooks/useRequestStatus';
 import { initiateStkPush } from '../../../m-pesa/mpesa-resource';
-import { MappedBill } from '../../../types';
+import { LineItem, MappedBill } from '../../../types';
+import PaymentStatusCheckerModal from '../payment-status-ckecker.modal';
 import { formatKenyanPhoneNumber } from '../utils';
 import styles from './initiate-payment.scss';
 
@@ -37,15 +42,17 @@ type FormData = z.infer<typeof initiatePaymentSchema>;
 export interface InitiatePaymentDialogProps {
   closeModal: () => void;
   bill: MappedBill;
+  selectedLineItems: Array<LineItem>;
 }
 
-const InitiatePaymentDialog: React.FC<InitiatePaymentDialogProps> = ({ closeModal, bill }) => {
+const InitiatePaymentDialog: React.FC<InitiatePaymentDialogProps> = ({ closeModal, bill, selectedLineItems }) => {
   const { t } = useTranslation();
   const { phoneNumber, isLoading: isLoadingPhoneNumber } = usePatientAttributes(bill.patientUuid);
   const { mpesaAPIBaseUrl, isPDSLFacility } = useConfig<BillingConfig>();
   const { mflCodeValue } = useSystemSetting('facility.mflcode');
   const [notification, setNotification] = useState<{ type: 'error' | 'success'; message: string } | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [hasMadePayment, setHasMadepayment] = useState(false);
   const [{ requestStatus }, pollingTrigger] = useRequestStatus(setNotification, closeModal, bill);
 
   const pendingAmount = bill.totalAmount - bill.tenderedAmount;
@@ -91,12 +98,35 @@ const InitiatePaymentDialog: React.FC<InitiatePaymentDialogProps> = ({ closeModa
     setIsLoading(false);
   };
 
+  if (isPDSLFacility && hasMadePayment) {
+    return (
+      <PaymentStatusCheckerModal
+        onClose={closeModal}
+        paymentMade={hasMadePayment}
+        onPaymentMadestatusChange={setHasMadepayment}
+        bill={bill}
+        selectedLineItems={selectedLineItems}
+      />
+    );
+  }
+
   return (
-    <div>
-      <ModalHeader closeModal={closeModal} />
+    <Form>
+      <ModalHeader className={styles.heading} closeModal={closeModal}>
+        {t('paymentPayment', 'Bill Payment')}
+      </ModalHeader>
       <ModalBody>
-        <Form className={styles.form}>
-          <h4>{t('paymentPayment', 'Bill Payment')}</h4>
+        {isPDSLFacility && (
+          <ContentSwitcher
+            selectedIndex={hasMadePayment ? 1 : 0}
+            onChange={({ name }) => {
+              setHasMadepayment(name === 'paymentMade');
+            }}>
+            <Switch name="paymentNotMade" text={t('paymentNotMade', 'Payment not made')} />
+            <Switch name="paymentMade" text={t('paymentMade', 'Payments already made')} />
+          </ContentSwitcher>
+        )}
+        <div className={styles.form}>
           {notification && (
             <InlineNotification
               kind={notification.type}
@@ -144,28 +174,30 @@ const InitiatePaymentDialog: React.FC<InitiatePaymentDialogProps> = ({ closeModa
               )}
             />
           </section>
-          <section>
-            <Button kind="secondary" className={styles.buttonLayout} onClick={closeModal}>
-              {t('cancel', 'Cancel')}
-            </Button>
-            <Button
-              type="submit"
-              className={styles.button}
-              onClick={handleSubmit(onSubmit)}
-              disabled={!isValid || isLoading || requestStatus === 'INITIATED'}>
-              {isLoading ? (
-                <>
-                  <Loading className={styles.button_spinner} withOverlay={false} small />{' '}
-                  {t('processingPayment', 'Processing Payment')}
-                </>
-              ) : (
-                t('initiatePay', 'Initiate Payment')
-              )}
-            </Button>
-          </section>
-        </Form>
+        </div>
       </ModalBody>
-    </div>
+      <ModalFooter>
+        <ButtonSet className={styles.buttonSet}>
+          <Button kind="secondary" onClick={closeModal} className={styles.button}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            type="submit"
+            className={styles.button}
+            onClick={handleSubmit(onSubmit)}
+            disabled={!isValid || isLoading || requestStatus === 'INITIATED'}>
+            {isLoading ? (
+              <>
+                <Loading className={styles.button_spinner} withOverlay={false} small />{' '}
+                {t('processingPayment', 'Processing Payment')}
+              </>
+            ) : (
+              t('initiatePayment', 'Initiate Payment')
+            )}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </Form>
   );
 };
 

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

@@ -21,18 +21,28 @@
   margin-bottom: spacing.$spacing-04;
 }
 
-.buttonLayout {
-  margin-top: layout.$spacing-05;
-  margin-bottom: layout.$spacing-01;
+.button_spinner {
+  padding: 0;
+  margin-right: layout.$spacing-04;  
 }
 
 .button {
-  margin-left: layout.$spacing-04;
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 20%;
+}
+
+.buttonSet {
+  padding: 0rem;
   margin-top: layout.$spacing-05;
-  margin-bottom: layout.$spacing-01;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: layout.$spacing-05;
 }
 
-.button_spinner {
-  padding: 0;
-  margin-right: 12px;
+.heading {
+  @include type.type-style('heading-02');
 }

package/src/invoice/payments/payment-status-ckecker.modal.tsx

@@ -0,0 +1,136 @@
+import {
+  Button,
+  ButtonSet,
+  ContentSwitcher,
+  InlineLoading,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Switch,
+  TextInput,
+} from '@carbon/react';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { mutate } from 'swr';
+import { processBillPayment, usePaymentModes } from '../../billing.resource';
+import { BillingConfig } from '../../config-schema';
+import { useClockInStatus } from '../../payment-points/use-clock-in-status';
+import { LineItem, MappedBill } from '../../types';
+import { checkPaymentStatus } from './payments.resource';
+import styles from './payments.scss';
+import { createPaymentPayload } from './utils';
+type PaymentStatusCheckerModalProps = {
+  onClose: () => void;
+  paymentMade?: boolean;
+  onPaymentMadestatusChange?: (paid: boolean) => void;
+  bill: MappedBill;
+  selectedLineItems: Array<LineItem>;
+};
+const PaymentStatusCheckerModal: React.FC<PaymentStatusCheckerModalProps> = ({
+  onClose,
+  onPaymentMadestatusChange,
+  paymentMade,
+  bill,
+  selectedLineItems,
+}) => {
+  const { t } = useTranslation();
+  const [transactionid, setTransactionid] = useState<string>();
+  const { globalActiveSheet } = useClockInStatus();
+  const { mobileMoneyPaymentModeUUID } = useConfig<BillingConfig>();
+  const { paymentModes, isLoading } = usePaymentModes();
+  const [checking, setChecking] = useState(false);
+  const mobilemoneypaymentMethod = useMemo(
+    () => paymentModes.find((mode) => mode.uuid === mobileMoneyPaymentModeUUID),
+    [paymentModes, mobileMoneyPaymentModeUUID],
+  );
+
+  const handleCheckPaymentStatus = useCallback(async () => {
+    try {
+      setChecking(true);
+      const res = await checkPaymentStatus(transactionid);
+      if (res?.data?.success) {
+        const totalAmountTendered = Number(res.data.data.TransAmount) || 0;
+        const amountDue = Number(bill.totalAmount) - (Number(bill.tenderedAmount) + Number(totalAmountTendered));
+        const paymentPayload = createPaymentPayload(
+          bill,
+          bill.patientUuid,
+          [{ referenceCode: transactionid, amount: totalAmountTendered, method: mobilemoneypaymentMethod }],
+          amountDue,
+          selectedLineItems,
+          globalActiveSheet,
+        );
+        await processBillPayment(paymentPayload, bill.uuid);
+        showSnackbar({
+          title: t('success', 'Success'),
+          kind: 'success',
+          subtitle: t('paymentReceived', 'Payment received'),
+        });
+        const url = `/ws/rest/v1/cashier/bill/${bill.uuid}`;
+        mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+        onClose?.();
+      } else {
+        showSnackbar({
+          title: t('paymentFailure', 'Payment Failure'),
+          kind: 'error',
+          subtitle: res?.data?.message || t('paymentNotSettled', 'Payment not settled'),
+        });
+      }
+    } catch (error: any) {
+      showSnackbar({ title: t('error', 'Error'), kind: 'error', subtitle: error?.message });
+    } finally {
+      setChecking(false);
+    }
+  }, [transactionid, t]);
+  return (
+    <React.Fragment>
+      <ModalHeader className={styles.heading} closeModal={onClose}>
+        {t('checkpaymentStatus', 'Check payment status')}
+      </ModalHeader>
+      <ModalBody>
+        <ContentSwitcher
+          selectedIndex={paymentMade ? 1 : 0}
+          onChange={({ name }) => {
+            onPaymentMadestatusChange?.(name === 'paymentMade');
+          }}>
+          <Switch name="paymentNotMade" text={t('paymentNotMade', 'Payment not made')} />
+          <Switch name="paymentMade" text={t('paymentMade', 'Payments already made')} />
+        </ContentSwitcher>
+        <TextInput
+          value={transactionid}
+          defaultWidth={300}
+          id="text-input-1"
+          labelText={t('transactionId', 'Transaction Id')}
+          placeholder={t('exampletransactionId', 'e.g TRMEWECEDD')}
+          size="md"
+          type="text"
+          helperText={t('mpesaTransactionId', 'Mpesa transaction Id')}
+          onChange={({ target: { value } }) => setTransactionid(value)}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.buttonSet}>
+          <Button kind="secondary" onClick={onClose} className={styles.button}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button
+            kind="primary"
+            disabled={!transactionid?.length || isLoading || checking}
+            onClick={handleCheckPaymentStatus}
+            className={styles.button}>
+            {isLoading || checking ? (
+              <InlineLoading
+                description={t('checkingPaymentStatus', 'Check payment status') + '...'}
+                iconDescription={t('loading', 'Loading')}
+              />
+            ) : (
+              t('check', 'Check')
+            )}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </React.Fragment>
+  );
+};
+
+export default PaymentStatusCheckerModal;

package/src/invoice/payments/payments.resource.ts

@@ -1,5 +1,5 @@
 import useSWR from 'swr';
-import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
 import { BillingConfig } from '../../config-schema';
 
 type PaymentMethod = {
@@ -13,6 +13,32 @@ const swrOption = {
   errorRetryCount: 2,
 };
 
+export interface PaymentStatusResponse {
+  success: boolean;
+  message: string;
+  data?: Data;
+}
+
+export interface Data {
+  id: number;
+  TransactionType: string;
+  TransID: string;
+  TransTime: string;
+  TransAmount: string;
+  BusinessShortCode: string;
+  BillRefNumber: string;
+  InvoiceNumber?: string;
+  OrgAccountBalance: string;
+  ThirdPartyTransID?: string;
+  MSISDN: string;
+  FirstName: string;
+  MiddleName?: string;
+  LastName?: string;
+  status: string;
+  created_at: string;
+  updated_at: string;
+}
+
 export const usePaymentModes = () => {
   const { excludedPaymentMode } = useConfig<BillingConfig>();
   const url = `/ws/rest/v1/cashier/paymentMode`;
@@ -32,3 +58,8 @@ export const usePaymentModes = () => {
     error,
   };
 };
+
+export const checkPaymentStatus = (transactionId: string) => {
+  const url = `${restBaseUrl}/rmsdataexchange/api/rmsmpesachecker?transactionId=${transactionId}`;
+  return openmrsFetch<PaymentStatusResponse>(url);
+};

package/src/invoice/payments/payments.scss

@@ -48,3 +48,24 @@
 .paymentError {
   margin: layout.$spacing-05 0;
 }
+
+.heading {
+  @include type.type-style('heading-02');
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 20%;
+}
+
+.buttonSet {
+  padding: 0rem;
+  margin-top: layout.$spacing-05;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: layout.$spacing-05;
+}