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

package/src/hooks/useOTP.ts

@@ -0,0 +1,292 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { OtpPayload, OtpResponse, ClaimSummary } from '../types';
+
+/**
+ * Generates a random OTP of a specified length.
+ */
+export function generateOTP(length = 5) {
+  let otpNumbers = '0123456789';
+  let OTP = '';
+  const len = otpNumbers.length;
+  for (let i = 0; i < length; i++) {
+    OTP += otpNumbers[Math.floor(Math.random() * len)];
+  }
+  return OTP;
+}
+
+/**
+ * Replaces placeholders in a template string with values from a given context.
+ */
+export function parseMessage<T extends Record<string, string | number>>(context: T, template: string): string {
+  if (!template?.trim()) {
+    throw new Error('Template must be a non-empty string');
+  }
+
+  const placeholderRegex = /\{\{([^{}]+)\}\}/g;
+
+  return template.replace(placeholderRegex, (match, key: string) => {
+    const trimmedKey = key.trim();
+    return trimmedKey in context ? String(context[trimmedKey]) : match;
+  });
+}
+
+/**
+ * Builds a URL for sending an SMS message.
+ */
+function buildSmsUrl(message: string, receiver: string): string {
+  const encodedMessage = encodeURIComponent(message);
+  return `${restBaseUrl}/kenyaemr/send-kenyaemr-sms?message=${encodedMessage}&phone=${receiver}`;
+}
+
+/**
+ * Validates that the required parameters for sending an OTP message are present.
+ */
+function validateOtpInputs(otp: string, receiver: string, patientName: string): void {
+  if (!otp?.trim() || !receiver?.trim() || !patientName?.trim()) {
+    throw new Error('Missing required parameters: otp, receiver, or patientName');
+  }
+}
+
+/**
+ * Sends an OTP message to a patient's phone number with claim details.
+ */
+export async function sendOtp(
+  payload: OtpPayload,
+  patientName: string,
+  claimSummary: ClaimSummary,
+  expiryMinutes: number = 5,
+): Promise<OtpResponse> {
+  const { otp, receiver } = payload;
+  validateOtpInputs(otp, receiver, patientName);
+
+  const otpContext = {
+    patientName: patientName,
+    claimAmount: `KES ${claimSummary.totalAmount.toLocaleString()}`,
+    servicesSummary:
+      claimSummary.services.length > 100 ? claimSummary.services.substring(0, 97) + '...' : claimSummary.services,
+    startDate: claimSummary.startDate,
+    endDate: claimSummary.endDate,
+    facility: claimSummary.facility,
+    expiryTime: expiryMinutes,
+    otp: otp,
+  };
+
+  const claimConsentTemplate =
+    'Dear {{patientName}}, ' +
+    'We are submitting a claim to your insurance for services provided from {{startDate}} to {{endDate}} at {{facility}}. ' +
+    'Total claim amount: {{claimAmount}}. ' +
+    'Services: {{servicesSummary}}. ' +
+    'Your OTP for consent is {{otp}} (valid {{expiryTime}} mins). ';
+
+  try {
+    const message = parseMessage(otpContext, claimConsentTemplate);
+    const url = buildSmsUrl(message, receiver);
+
+    const response = await openmrsFetch(url, {
+      method: 'POST',
+      redirect: 'follow',
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+    throw new Error(`Failed to send OTP: ${errorMessage}`);
+  }
+}
+
+export class OTPManager {
+  private otpStore: Map<string, { otp: string; timestamp: number; attempts: number; expiryTime: number }> = new Map();
+  private readonly MAX_ATTEMPTS = 3;
+  private readonly DEFAULT_EXPIRY_TIME = 5 * 60 * 1000;
+
+  async requestOTP(
+    phoneNumber: string,
+    patientName: string,
+    claimSummary: ClaimSummary,
+    expiryMinutes: number = this.DEFAULT_EXPIRY_TIME,
+  ): Promise<void> {
+    const otp = generateOTP(5);
+    const expiryTime = expiryMinutes * 60 * 1000;
+
+    const normalizedPhone = this.normalizePhoneNumber(phoneNumber);
+
+    const otpData = {
+      otp,
+      timestamp: Date.now(),
+      attempts: 0,
+      expiryTime,
+    };
+
+    this.otpStore.set(normalizedPhone, otpData);
+
+    await sendOtp({ otp, receiver: phoneNumber }, patientName, claimSummary, expiryMinutes);
+  }
+
+  async verifyOTP(phoneNumber: string, inputOtp: string): Promise<boolean> {
+    const normalizedPhone = this.normalizePhoneNumber(phoneNumber);
+
+    const storedData = this.otpStore.get(normalizedPhone);
+
+    if (!storedData) {
+      throw new Error('No OTP found for this phone number. Please request a new OTP.');
+    }
+
+    if (Date.now() - storedData.timestamp > storedData.expiryTime) {
+      this.otpStore.delete(normalizedPhone);
+      throw new Error('OTP has expired. Please request a new OTP.');
+    }
+
+    storedData.attempts++;
+
+    if (storedData.attempts > this.MAX_ATTEMPTS) {
+      this.otpStore.delete(normalizedPhone);
+      throw new Error('Maximum OTP attempts exceeded. Please request a new OTP.');
+    }
+
+    if (storedData.otp === inputOtp.trim()) {
+      this.otpStore.delete(normalizedPhone);
+      return true;
+    } else {
+      this.otpStore.set(normalizedPhone, storedData);
+      throw new Error(`Invalid OTP. ${this.MAX_ATTEMPTS - storedData.attempts} attempts remaining.`);
+    }
+  }
+
+  clearOTP(phoneNumber: string): void {
+    const normalizedPhone = this.normalizePhoneNumber(phoneNumber);
+    this.otpStore.delete(normalizedPhone);
+  }
+
+  clearAllOTPs(): void {
+    this.otpStore.clear();
+  }
+
+  cleanupExpiredOTPs(): void {
+    const now = Date.now();
+    for (const [phoneNumber, data] of this.otpStore.entries()) {
+      if (now - data.timestamp > data.expiryTime) {
+        this.otpStore.delete(phoneNumber);
+      }
+    }
+  }
+
+  hasValidOTP(phoneNumber: string): boolean {
+    const normalizedPhone = this.normalizePhoneNumber(phoneNumber);
+    const storedData = this.otpStore.get(normalizedPhone);
+    if (!storedData) {
+      return false;
+    }
+
+    return Date.now() - storedData.timestamp <= storedData.expiryTime;
+  }
+
+  getRemainingTimeMinutes(phoneNumber: string): number {
+    const normalizedPhone = this.normalizePhoneNumber(phoneNumber);
+    const storedData = this.otpStore.get(normalizedPhone);
+    if (!storedData) {
+      return 0;
+    }
+
+    const elapsed = Date.now() - storedData.timestamp;
+    const remaining = Math.max(0, storedData.expiryTime - elapsed);
+    return Math.ceil(remaining / (60 * 1000));
+  }
+
+  getRemainingAttempts(phoneNumber: string): number {
+    const normalizedPhone = this.normalizePhoneNumber(phoneNumber);
+    const storedData = this.otpStore.get(normalizedPhone);
+    if (!storedData) {
+      return 0;
+    }
+
+    return Math.max(0, this.MAX_ATTEMPTS - storedData.attempts);
+  }
+
+  getStoredOTP(phoneNumber: string): string | null {
+    const normalizedPhone = this.normalizePhoneNumber(phoneNumber);
+    const storedData = this.otpStore.get(normalizedPhone);
+    return storedData ? storedData.otp : null;
+  }
+
+  transferOTP(oldPhoneNumber: string, newPhoneNumber: string): boolean {
+    const oldNormalized = this.normalizePhoneNumber(oldPhoneNumber);
+    const newNormalized = this.normalizePhoneNumber(newPhoneNumber);
+
+    if (oldNormalized === newNormalized) {
+      return true;
+    }
+
+    const storedData = this.otpStore.get(oldNormalized);
+    if (!storedData) {
+      return false;
+    }
+
+    this.otpStore.set(newNormalized, storedData);
+    this.otpStore.delete(oldNormalized);
+
+    return true;
+  }
+
+  private normalizePhoneNumber(phoneNumber: string): string {
+    if (!phoneNumber) {
+      return '';
+    }
+
+    let normalized = phoneNumber.replace(/\D/g, '');
+
+    if (normalized.startsWith('254') && normalized.length === 12) {
+      return normalized;
+    } else if (normalized.startsWith('0') && normalized.length === 10) {
+      return '254' + normalized.substring(1);
+    } else if (normalized.length === 9) {
+      return '254' + normalized;
+    }
+
+    return normalized;
+  }
+}
+
+export const otpManager = new OTPManager();
+
+setInterval(() => {
+  otpManager.cleanupExpiredOTPs();
+}, 2 * 60 * 1000);
+
+export function createOtpHandlers(patientName: string, expiryMinutes: number) {
+  return {
+    onRequestOtp: async (phone: string, claimSummary: ClaimSummary): Promise<void> => {
+      await otpManager.requestOTP(phone, patientName, claimSummary, expiryMinutes);
+    },
+    onVerify: async (otp: string, phoneNumber: string): Promise<void> => {
+      const isValid = await otpManager.verifyOTP(phoneNumber, otp);
+      if (!isValid) {
+        throw new Error('OTP verification failed');
+      }
+    },
+    hasValidOTP: (phone: string): boolean => {
+      return otpManager.hasValidOTP(phone);
+    },
+    getRemainingTime: (phone: string): number => {
+      return otpManager.getRemainingTimeMinutes(phone);
+    },
+    getRemainingAttempts: (phone: string): number => {
+      return otpManager.getRemainingAttempts(phone);
+    },
+    clearOTP: (phone: string): void => {
+      otpManager.clearOTP(phone);
+    },
+    clearAllOTPs: (): void => {
+      otpManager.clearAllOTPs();
+    },
+    getStoredOTP: (phone: string): string | null => {
+      return otpManager.getStoredOTP(phone);
+    },
+    transferOTP: (oldPhone: string, newPhone: string): boolean => {
+      return otpManager.transferOTP(oldPhone, newPhone);
+    },
+  };
+}

package/src/hooks/usePhoneNumber.ts

@@ -0,0 +1,35 @@
+import { openmrsFetch, restBaseUrl, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { BillingConfig } from '../config-schema';
+
+interface PersonAttribute {
+  uuid: string;
+  value: string;
+  attributeType?: {
+    uuid: string;
+    display: string;
+  };
+}
+
+interface PersonAttributeResponse {
+  results: PersonAttribute[];
+}
+
+export const usePhoneNumberAttribute = (patientUuid: string) => {
+  const url = `${restBaseUrl}/person/${patientUuid}/attribute?v=custom:(uuid,value,attributeType:(uuid,display))`;
+  const { phoneNumberAttributeTypeUUID } = useConfig<BillingConfig>();
+
+  const { data, isLoading, error } = useSWR<{ data: PersonAttributeResponse }>(patientUuid ? url : null, openmrsFetch);
+
+  const phoneNumberAttribute = data?.data?.results?.find(
+    (attr) => attr.uuid === phoneNumberAttributeTypeUUID || attr.attributeType?.uuid === phoneNumberAttributeTypeUUID,
+  );
+
+  return {
+    attribute: phoneNumberAttribute,
+    phoneNumber: phoneNumberAttribute?.value || null,
+    isLoading,
+    error,
+    allAttributes: data?.data?.results,
+  };
+};

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

@@ -124,9 +124,9 @@ export function InvoiceActions({ bill, selectedLineItems = [], activeVisit }: In
 
     if (activeVisit) {
       await handleEndVisit();
-      navigate({ to: `${spaBasePath}/billing/patient/${patientUuid}/${billUuid}/claims` });
+      navigate({ to: `${spaBasePath}/accounting/patient/${patientUuid}/${billUuid}/claims` });
     } else {
-      navigate({ to: `${spaBasePath}/billing/patient/${patientUuid}/${billUuid}/claims` });
+      navigate({ to: `${spaBasePath}/accounting/patient/${patientUuid}/${billUuid}/claims` });
     }
   };
 

package/src/left-panel-link.component.tsx

@@ -16,37 +16,64 @@ export function LinkExtension({ config }: { config: LinkConfig }) {
   const location = useLocation();
   const spaBasePath = window.getOpenmrsSpaBase() + 'home';
 
-  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+  let urlSegment = useMemo(() => {
+    const rawSegment = last(location.pathname.split('/'));
+    const decodedSegment = decodeURIComponent(rawSegment);
+    return decodedSegment;
+  }, [location.pathname]);
 
   const isUUID = (value: string) => {
     const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
-    return regex.test(value);
+    const result = regex.test(value);
+    return result;
   };
 
   if (isUUID(urlSegment)) {
     if (location.pathname.includes('payment-points')) {
-      urlSegment = location.pathname.split('/').at(-2);
+      const newSegment = location.pathname.split('/').at(-2);
+      urlSegment = newSegment;
     } else {
-      urlSegment = '';
+      const pathParts = location.pathname.split('/');
+      const mainSectionIndex = pathParts.findIndex((part) => part === nameSegment);
+
+      if (mainSectionIndex > -1) {
+        urlSegment = nameSegment;
+      } else {
+        const containsOurSection =
+          location.pathname.includes('/' + nameSegment + '/') || location.pathname.includes('/' + nameSegment);
+        if (containsOurSection) {
+          urlSegment = nameSegment;
+        } else {
+          urlSegment = '';
+        }
+      }
     }
   } else if (location.pathname.endsWith('claims') || location.pathname.endsWith('claims/')) {
-    // Filling claims form screen
-    urlSegment = '';
+    const containsOurSection =
+      location.pathname.includes('/' + nameSegment + '/') || location.pathname.split('/').includes(nameSegment);
+    if (containsOurSection) {
+      urlSegment = nameSegment;
+    } else {
+      urlSegment = '';
+    }
   }
 
   const isActive = nameSegment === urlSegment;
+  const finalUrl = spaBasePath + '/' + name;
+
   return (
-    <ConfigurableLink
-      to={spaBasePath + '/' + name}
-      className={`cds--side-nav__link ${isActive && 'active-left-nav-link'}`}>
+    <ConfigurableLink to={finalUrl} className={`cds--side-nav__link ${isActive && 'active-left-nav-link'}`}>
       {t(title)}
     </ConfigurableLink>
   );
 }
 
-export const createLeftPanelLink = (config: LinkConfig) => () =>
-  (
-    <BrowserRouter>
-      <LinkExtension config={config} />
-    </BrowserRouter>
-  );
+export const createLeftPanelLink = (config: LinkConfig) => {
+  return () => {
+    return (
+      <BrowserRouter>
+        <LinkExtension config={config} />
+      </BrowserRouter>
+    );
+  };
+};

package/src/root.component.tsx

@@ -16,7 +16,7 @@ import { PaymentPoints } from './payment-points/payment-points.component';
 import BillDepositDashboard from './bill-deposit/components/dashboard/bill-deposit-dashboard.component';
 
 const RootComponent: React.FC = () => {
-  const baseName = window.getOpenmrsSpaBase() + 'home/billing';
+  const baseName = window.getOpenmrsSpaBase() + 'home/accounting';
 
   return (
     <BrowserRouter basename={baseName}>

package/src/types/index.ts

@@ -631,3 +631,38 @@ export interface ProgressTracker {
 export interface checkSHARegNumResponse {
   registrationNumber: string;
 }
+export type OTPVerificationModalOptions = {
+  otpLength?: number;
+  onVerify?: (otp: string) => Promise<void>;
+  obscureText?: boolean;
+  centerBoxes?: boolean;
+  phoneNumber: string;
+  onRequestOtp?: (phoneNumber: string) => Promise<void>;
+  onVerificationSuccess?: () => void;
+  expiryMinutes?: number;
+};
+
+export interface OtpPayload {
+  otp: string;
+  receiver: string;
+}
+
+export interface OtpContext extends Record<string, string | number> {
+  otp: string;
+  patient_name: string;
+  expiry_time: number;
+}
+
+export interface OtpResponse {
+  success: boolean;
+  message: string;
+}
+
+export interface ClaimSummary {
+  totalAmount: number;
+  facility: string;
+  totalItems: number;
+  services: string;
+  startDate: string;
+  endDate: string;
+}