@kenyaemr/esm-billing-app 5.4.2-pre.2548 → 5.4.2-pre.2553

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":"accountingDashboardLink","name":"accounting-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","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","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":"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":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["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"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-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":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment 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":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.2548"}
+{"$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":"accountingDashboardLink","name":"accounting-dashboard-link","slot":"homepage-dashboard-slot","meta":{"name":"accounting","slot":"accounting-dashboard-slot","title":"Accounting"}},{"name":"billing-dashboard","component":"billingDashboard","slot":"accounting-dashboard-slot"},{"component":"benefitsPackageDashboardLink","name":"benefits-package-dashboard-link","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","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":"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":"claimsManagementOverviewDashboardLink","name":"claims-management-overview-link","slots":["claims-management-dashboard-link-slot"]},{"component":"preAuthRequestsDashboardLink","name":"preauthrequest-overview-link","slots":["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"},{"name":"patient-info-sha-status","component":"patientBannerShaStatus","slot":"patient-banner-tags-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":"add-deposit-workspace","component":"addDepositWorkspace","title":"Add Deposit","type":"other-form"},{"name":"deposit-transaction-workspace","component":"depositTransactionWorkspace","title":"Deposit Transaction","type":"other-form"},{"name":"payment-workspace","component":"paymentWorkspace","title":"Payment 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":"clock-in-modal","component":"clockIn"},{"name":"create-bill-item-modal","component":"createBillItemModal"},{"name":"delete-deposit-modal","component":"deleteDepositModal"},{"name":"reverse-transaction-modal","component":"reverseTransactionModal"},{"name":"print-preview-modal","component":"printPreviewModal"},{"name":"bill-action-modal","component":"billActionModal"},{"name":"require-billing-modal","component":"requirePaymentModal"}],"version":"5.4.2-pre.2553"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-billing-app",
-  "version": "5.4.2-pre.2548",
+  "version": "5.4.2-pre.2553",
   "description": "Billing app for KenyaEMR",
   "keywords": [
     "openmrs"

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

@@ -14,8 +14,8 @@ import {
   ComboBox,
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { navigate, showSnackbar, toOmrsIsoString, useConfig, useSession } from '@openmrs/esm-framework';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { navigate, showModal, showSnackbar, toOmrsIsoString, useConfig, useSession } from '@openmrs/esm-framework';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
@@ -25,7 +25,7 @@ import { BillingConfig } from '../../../config-schema';
 import { useSystemSetting } from '../../../hooks/getMflCode';
 import usePatientDiagnosis from '../../../hooks/usePatientDiagnosis';
 import useProvider from '../../../hooks/useProvider';
-import { LineItem, MappedBill } from '../../../types';
+import { ClaimSummary, LineItem, MappedBill, OTPVerificationModalOptions } from '../../../types';
 import ClaimExplanationAndJusificationInput from './claims-explanation-and-justification-form-input.component';
 import { processClaims, SHAPackagesAndInterventionVisitAttribute, useVisit } from './claims-form.resource';
 import useProviderList from '../../../hooks/useProviderList';
@@ -33,6 +33,8 @@ import useProviderList from '../../../hooks/useProviderList';
 import styles from './claims-form.scss';
 import debounce from 'lodash-es/debounce';
 import { formatDateTime } from '../../utils';
+import { otpManager } from '../../../hooks/useOTP';
+import { usePhoneNumberAttribute } from '../../../hooks/usePhoneNumber';
 
 type ClaimsFormProps = {
   bill: MappedBill;
@@ -65,6 +67,12 @@ const ClaimsFormSchema = z.object({
   provider: z.string().min(1, { message: 'Provider is required' }),
 });
 
+enum OTPState {
+  NOT_STARTED = 'not_started',
+  REQUESTED = 'requested',
+  VERIFIED = 'verified',
+}
+
 const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
   const { t } = useTranslation();
   const { mflCodeValue } = useSystemSetting('facility.mflcode');
@@ -74,33 +82,22 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
   const {
     currentProvider: { uuid: providerUuid },
   } = useSession();
-  const { providerLoading: providerLoading, provider, error: providerError } = useProvider(providerUuid);
+  const { providerLoading, provider, error: providerError } = useProvider(providerUuid);
   const { visitAttributeTypes } = useConfig<BillingConfig>();
   const { providers, providersLoading } = useProviderList();
+  const { phoneNumber } = usePhoneNumberAttribute(patientUuid);
 
-  const packagesAndinterventions = useMemo(() => {
-    if (recentVisit) {
-      const values = recentVisit.attributes?.find(
-        (attr) => attr.attributeType.uuid === visitAttributeTypes.shaBenefitPackagesAndInterventions,
-      )?.value;
-      if (values) {
-        const payload: SHAPackagesAndInterventionVisitAttribute = JSON.parse(values);
-        return payload;
-      }
-    }
-    return null;
-  }, [recentVisit, visitAttributeTypes]);
-
-  const encounterUuid = recentVisit?.encounters[0]?.uuid;
-  const visitTypeUuid = recentVisit?.visitType.uuid;
-  const [loading, setLoading] = useState(false);
+  const [otpState, setOtpState] = useState<OTPState>(OTPState.NOT_STARTED);
+  const [pendingClaimData, setPendingClaimData] = useState<z.infer<typeof ClaimsFormSchema> | null>(null);
   const [formInitialized, setFormInitialized] = useState(false);
   const [validationEnabled, setValidationEnabled] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [currentOtpPhoneNumber, setCurrentOtpPhoneNumber] = useState<string>('');
 
-  const handleNavigateToBillingOptions = () =>
-    navigate({
-      to: window.getOpenmrsSpaBase() + `home/billing/patient/${patientUuid}/${billUuid}`,
-    });
+  const currentPhoneRef = useRef<string>('');
+
+  const patientName = `${bill.patientName}`;
+  const otpExpiryMinutes = 5;
 
   const form = useForm<z.infer<typeof ClaimsFormSchema>>({
     mode: 'onTouched',
@@ -122,17 +119,14 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
   const {
     control,
     handleSubmit,
-    formState: { errors, isValid, isDirty, touchedFields },
+    formState: { errors, isValid, touchedFields },
     setValue,
-    reset,
     trigger,
     watch,
   } = form;
 
   const packages = watch('packages');
   const interventions = watch('interventions');
-  const claimExplanation = watch('claimExplanation');
-  const claimJustification = watch('claimJustification');
 
   const debouncedValidation = useCallback(
     debounce(() => {
@@ -140,7 +134,6 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
         trigger();
       }
     }, 500),
-    // eslint-disable-line react-hooks/exhaustive-deps
     [formInitialized, trigger],
   );
 
@@ -157,8 +150,24 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
         facility: `${recentVisit?.location?.display || ''} - ${mflCodeValue || ''}`,
         treatmentStart: formatDateTime(recentVisit?.startDatetime || ''),
         treatmentEnd: formatDateTime(recentVisit?.stopDatetime || ''),
-        packages: packagesAndinterventions?.packages ?? [],
-        interventions: packagesAndinterventions?.interventions ?? [],
+        packages: recentVisit?.attributes?.find(
+          (attr) => attr.attributeType.uuid === visitAttributeTypes.shaBenefitPackagesAndInterventions,
+        )?.value
+          ? JSON.parse(
+              recentVisit.attributes.find(
+                (attr) => attr.attributeType.uuid === visitAttributeTypes.shaBenefitPackagesAndInterventions,
+              ).value,
+            ).packages
+          : [],
+        interventions: recentVisit?.attributes?.find(
+          (attr) => attr.attributeType.uuid === visitAttributeTypes.shaBenefitPackagesAndInterventions,
+        )?.value
+          ? JSON.parse(
+              recentVisit.attributes.find(
+                (attr) => attr.attributeType.uuid === visitAttributeTypes.shaBenefitPackagesAndInterventions,
+              ).value,
+            ).interventions
+          : [],
         provider: providerUuid,
       };
 
@@ -176,21 +185,87 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
     mflCodeValue,
     setValue,
     provider,
-    packagesAndinterventions,
     visitLoading,
     diagnosisLoading,
     providerLoading,
     providerUuid,
+    visitAttributeTypes,
   ]);
 
-  const onSubmit = async (data: z.infer<typeof ClaimsFormSchema>) => {
-    setValidationEnabled(true);
-    const isFormValid = await trigger();
-    if (!isFormValid) {
-      return;
-    }
+  const generateClaimSummary = (data: z.infer<typeof ClaimsFormSchema>): ClaimSummary => {
+    const billServiceNames = selectedLineItems.map((item) => item.billableService);
+    const services = billServiceNames.map((service) => service.replace(/^[a-f0-9-]+:/, '').trim());
+    const totalAmount = selectedLineItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
+
+    return {
+      totalAmount,
+      facility: recentVisit?.location?.display || '',
+      totalItems: selectedLineItems.length,
+      services: services.join(', '),
+      startDate: data.treatmentStart,
+      endDate: data.treatmentEnd,
+    };
+  };
+
+  const createDynamicOTPHandlers = useCallback(
+    (initialPhone: string) => {
+      currentPhoneRef.current = initialPhone;
+
+      return {
+        onRequestOtp: async (phoneNumber: string): Promise<void> => {
+          if (currentPhoneRef.current && currentPhoneRef.current !== phoneNumber) {
+            otpManager.transferOTP(currentPhoneRef.current, phoneNumber);
+          }
+
+          setCurrentOtpPhoneNumber(phoneNumber);
+          currentPhoneRef.current = phoneNumber;
+
+          const currentFormData = form.getValues();
+          if (!currentFormData || !selectedLineItems?.length) {
+            throw new Error('No claim data available for OTP request');
+          }
+
+          const claimSummary = generateClaimSummary(currentFormData);
+          await otpManager.requestOTP(phoneNumber, patientName, claimSummary, otpExpiryMinutes);
+        },
+        onVerify: async (otp: string): Promise<void> => {
+          const phoneForVerification = currentPhoneRef.current;
+
+          if (!phoneForVerification) {
+            throw new Error('No phone number available for verification');
+          }
 
+          const isValid = await otpManager.verifyOTP(phoneForVerification, otp);
+          if (!isValid) {
+            throw new Error('OTP verification failed');
+          }
+        },
+      };
+    },
+    [patientName, form, selectedLineItems, otpExpiryMinutes],
+  );
+
+  const launchOtpVerificationModal = (props: OTPVerificationModalOptions) => {
+    const dispose = showModal('otp-verification-modal', {
+      ...props,
+      onClose: () => {
+        if (otpState === OTPState.REQUESTED) {
+          setOtpState(OTPState.NOT_STARTED);
+        }
+        dispose();
+      },
+      size: 'xs',
+    });
+    return dispose;
+  };
+
+  const handleOTPVerificationSuccess = async (): Promise<void> => {
+    setOtpState(OTPState.VERIFIED);
+  };
+
+  const processClaim = async (data: z.infer<typeof ClaimsFormSchema>) => {
     setLoading(true);
+
     const providedItems = selectedLineItems.reduce((acc, item) => {
       acc[item.uuid] = {
         items: [
@@ -216,12 +291,12 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
       diagnoses: data.diagnoses,
       paidInFacility: true,
       patient: patientUuid,
-      visitType: visitTypeUuid,
+      visitType: recentVisit?.visitType?.uuid,
       guaranteeId: 'G-001',
       claimCode: 'C-001',
       provider: data.provider,
-      visitUuid: recentVisit.uuid,
-      encounterUuid: encounterUuid,
+      visitUuid: recentVisit?.uuid,
+      encounterUuid: recentVisit?.encounters?.[0]?.uuid,
       use: 'claim',
       insurer: 'SHA',
       billNumber: billUuid,
@@ -231,20 +306,27 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
 
     try {
       await processClaims(payload);
+
       showSnackbar({
         kind: 'success',
         title: t('processClaim', 'Process Claim'),
-        subtitle: t('sendClaim', 'Claim sent successfully'),
-        timeoutInMs: 3000,
+        subtitle: t('claimProcessedSuccessfully', 'Claim processed and sent successfully'),
+        timeoutInMs: 4000,
         isLowContrast: true,
       });
+
+      setOtpState(OTPState.NOT_STARTED);
+      setPendingClaimData(null);
+      setCurrentOtpPhoneNumber('');
+      currentPhoneRef.current = '';
+      otpManager.clearAllOTPs();
+
       setTimeout(() => {
         navigate({
           to: window.getOpenmrsSpaBase() + 'home/billing/',
         });
       }, 1000);
     } catch (err) {
-      console.error(err);
       showSnackbar({
         kind: 'error',
         title: t('claimError', 'Claim Error'),
@@ -257,6 +339,78 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
     }
   };
 
+  const handleInitiateOTPVerification = async (data: z.infer<typeof ClaimsFormSchema>) => {
+    setValidationEnabled(true);
+    const isFormValid = await trigger();
+    if (!isFormValid) {
+      return;
+    }
+
+    if (!phoneNumber) {
+      showSnackbar({
+        kind: 'error',
+        title: t('noPhoneNumber', 'No Phone Number'),
+        subtitle: t(
+          'noPhoneNumberMessage',
+          'No phone number found for this patient. Please update patient information.',
+        ),
+        timeoutInMs: 4000,
+        isLowContrast: false,
+      });
+      return;
+    }
+
+    setPendingClaimData(data);
+    setOtpState(OTPState.REQUESTED);
+    setCurrentOtpPhoneNumber(phoneNumber);
+    currentPhoneRef.current = phoneNumber;
+
+    const dynamicHandlers = createDynamicOTPHandlers(phoneNumber);
+
+    setTimeout(() => {
+      launchOtpVerificationModal({
+        otpLength: 5,
+        obscureText: false,
+        phoneNumber: phoneNumber,
+        expiryMinutes: otpExpiryMinutes,
+        onRequestOtp: dynamicHandlers.onRequestOtp,
+        onVerify: dynamicHandlers.onVerify,
+        onVerificationSuccess: handleOTPVerificationSuccess,
+      });
+    }, 0);
+  };
+
+  const handleProcessVerifiedClaim = async () => {
+    if (pendingClaimData && otpState === OTPState.VERIFIED) {
+      await processClaim(pendingClaimData);
+    }
+  };
+
+  const handleReopenOTPModal = () => {
+    const dynamicHandlers = createDynamicOTPHandlers(phoneNumber);
+
+    launchOtpVerificationModal({
+      otpLength: 5,
+      obscureText: false,
+      phoneNumber: currentOtpPhoneNumber || phoneNumber,
+      expiryMinutes: otpExpiryMinutes,
+      onRequestOtp: dynamicHandlers.onRequestOtp,
+      onVerify: dynamicHandlers.onVerify,
+      onVerificationSuccess: handleOTPVerificationSuccess,
+    });
+  };
+
+  const handleDiscardClaim = () => {
+    setOtpState(OTPState.NOT_STARTED);
+    setPendingClaimData(null);
+    setCurrentOtpPhoneNumber('');
+    currentPhoneRef.current = '';
+    otpManager.clearAllOTPs();
+    navigate({
+      to: window.getOpenmrsSpaBase() + `home/billing/patient/${patientUuid}/${billUuid}`,
+    });
+  };
+
   if (visitLoading || diagnosisLoading || providerLoading) {
     return (
       <Layer className={styles.loading}>
@@ -288,9 +442,12 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
     return validationEnabled && errors[fieldName] && (touchedFields[fieldName] || formInitialized);
   };
 
+  const isFormValid = isValid && packages?.length > 0 && interventions?.length > 0 && selectedLineItems?.length > 0;
+  const displayPhoneNumber = currentOtpPhoneNumber || phoneNumber;
+
   return (
     <FormProvider {...form}>
-      <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
+      <Form className={styles.form}>
         {!selectedLineItems?.length && (
           <div className={styles.notificationContainer}>
             <InlineNotification
@@ -303,6 +460,49 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
             />
           </div>
         )}
+
+        {!displayPhoneNumber && (
+          <div className={styles.notificationContainer}>
+            <InlineNotification
+              kind="warning"
+              title={t('noPhoneNumber', 'No Phone Number')}
+              subtitle={t(
+                'noPhoneNumberFound',
+                'No phone number found for this patient. OTP verification will not be available.',
+              )}
+              hideCloseButton={true}
+              lowContrast={true}
+              className={styles.notification}
+            />
+          </div>
+        )}
+
+        {otpState === OTPState.REQUESTED && (
+          <div className={styles.notificationContainer}>
+            <InlineNotification
+              kind="info"
+              title={t('otpVerificationPending', 'OTP Verification Pending')}
+              subtitle={t('otpVerificationPendingMessage', 'Please complete OTP verification to process the claim')}
+              hideCloseButton={true}
+              lowContrast={true}
+              className={styles.notification}
+            />
+          </div>
+        )}
+
+        {otpState === OTPState.VERIFIED && (
+          <div className={styles.notificationContainer}>
+            <InlineNotification
+              kind="success"
+              title={t('otpVerified', 'OTP Verified')}
+              subtitle={t('otpVerifiedReadyToProcess', 'OTP has been verified. Click "Process Claim" to submit.')}
+              hideCloseButton={true}
+              lowContrast={true}
+              className={styles.notification}
+            />
+          </div>
+        )}
+
         <Stack gap={4} className={styles.grid}>
           <span className={styles.claimFormTitle}>{t('formTitle', 'Fill in the form details')}</span>
           <Row className={styles.formClaimRow}>
@@ -440,27 +640,45 @@ const ClaimsForm: React.FC<ClaimsFormProps> = ({ bill, selectedLineItems }) => {
             validationEnabled={validationEnabled}
             onInteraction={() => setValidationEnabled(true)}
           />
+
           <ButtonSet className={styles.buttonSet}>
-            <Button className={styles.button} kind="secondary" onClick={handleNavigateToBillingOptions}>
+            <Button className={styles.button} kind="secondary" onClick={handleDiscardClaim}>
               {t('discardClaim', 'Discard Claim')}
             </Button>
-            <Button
-              className={styles.button}
-              kind="primary"
-              type="submit"
-              onClick={() => setValidationEnabled(true)}
-              disabled={
-                loading || !isValid || !packages?.length || !interventions?.length || !selectedLineItems?.length
-              }
-              tooltipPosition="top"
-              tooltipAlignment="center"
-              renderIcon={loading ? InlineLoading : undefined}>
-              {loading ? (
-                <InlineLoading description={t('processing', 'Processing...')} />
-              ) : (
-                <>{t('processClaim', 'Process Claim')}</>
-              )}
-            </Button>
+
+            {otpState === OTPState.NOT_STARTED && (
+              <Button
+                className={styles.button}
+                kind="primary"
+                onClick={handleSubmit(handleInitiateOTPVerification)}
+                disabled={!isFormValid || !displayPhoneNumber}
+                tooltipPosition="top"
+                tooltipAlignment="center">
+                {t('sendOtp', 'Send OTP')}
+              </Button>
+            )}
+
+            {otpState === OTPState.REQUESTED && (
+              <Button className={styles.button} kind="ghost" onClick={handleReopenOTPModal}>
+                {t('enterOtp', 'Enter OTP')}
+              </Button>
+            )}
+
+            {otpState === OTPState.VERIFIED && (
+              <Button
+                className={styles.button}
+                kind="primary"
+                onClick={handleProcessVerifiedClaim}
+                disabled={!pendingClaimData || loading}
+                tooltipPosition="top"
+                tooltipAlignment="center">
+                {loading ? (
+                  <InlineLoading description={t('processing', 'Processing claim...')} />
+                ) : (
+                  t('processClaim', 'Process Claim')
+                )}
+              </Button>
+            )}
           </ButtonSet>
         </Stack>
       </Form>

package/src/config-schema.ts

@@ -35,6 +35,7 @@ export interface BillingConfig {
     duration: number;
   };
   localeCurrencyMapping: Record<string, string>;
+  phoneNumberAttributeTypeUUID: string;
 }
 
 export const configSchema: ConfigSchema = {
@@ -68,6 +69,11 @@ export const configSchema: ConfigSchema = {
     _description: 'The base url that will be used to make any backend calls related to mpesa.',
     _default: 'https://billing.kenyahmis.org',
   },
+  phoneNumberAttributeTypeUUID: {
+    _type: Type.String,
+    _description: 'The person attribute type uuid for phone number',
+    _default: '78b4630d-3446-4db2-b570-2e553231a589',
+  },
   hieBaseUrl: {
     _type: Type.String,
     _description: 'HIE Base URL for getting interventions and benefit packages',